:root{
  --bg:#f5f6fa;
  --card:#ffffff;
  --line:#e6e8f0;
  --text:#1f2430;
  --muted:#8f9bb3;
  --accent:#4f86f7;
  --pink:#ff4d8d;
  --pink-bg:#fff2f7;
  --pink-line:#ffc9de;
  --pink-text:#c81e5b;
  --me:#4f86f7;
  --ta:#9b51e0;
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;
}
input,select,button{font-family:inherit;}
.hidden{display:none !important;}

/* ============ 登录 / 注册 ============ */
.auth-view{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#eef3ff 0%,#fdf0f7 100%);
}
.auth-card{
  width:100%;max-width:360px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px 24px;box-shadow:0 12px 40px rgba(79,134,247,.10);
}
.auth-card h1{font-size:20px;margin:0 0 6px;text-align:center;letter-spacing:.5px;}
.auth-sub{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 20px;line-height:1.6;}
.auth-tabs{display:flex;background:#f2f4fa;border-radius:10px;padding:3px;margin-bottom:18px;}
.auth-tabs button{
  flex:1;height:32px;border:none;background:none;border-radius:8px;
  font-size:13px;color:var(--muted);cursor:pointer;transition:.15s;
}
.auth-tabs button.on{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.06);}
#authForm label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px;}
#authForm input{
  display:block;width:100%;height:38px;margin-top:6px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;background:#fbfbfe;font-size:14px;color:inherit;
}
#authForm input:focus{outline:none;border-color:var(--accent);background:#fff;}
.primary{
  width:100%;height:40px;margin-top:6px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;
}
.primary:hover{background:#3d73e6;}
.primary:disabled{opacity:.6;cursor:not-allowed;}
.auth-msg{min-height:18px;font-size:12px;color:#eb5757;text-align:center;margin:12px 0 0;}

/* ============ 顶栏 ============ */
.topbar{
  display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.brand{font-size:15px;font-weight:600;letter-spacing:.5px;}
.spacer{flex:1;}
.who{display:flex;align-items:center;gap:7px;font-size:13px;color:#5b6474;}
.avatar{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.ghost-btn{
  height:30px;padding:0 12px;border:1px solid var(--line);background:#fbfbfe;
  border-radius:8px;font-size:12px;color:var(--text);cursor:pointer;transition:.15s;
}
.ghost-btn:hover{background:#fdecec;border-color:#f7c9c9;color:#eb5757;}

/* ============ 整体布局 ============ */
.app{display:flex;gap:18px;align-items:flex-start;padding:18px;max-width:1220px;margin:0 auto;}

/* ============ 左侧面板 ============ */
.panel{
  flex:0 0 340px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px 18px;position:sticky;top:74px;
}
.tabs{display:flex;gap:6px;background:#f2f4fa;border-radius:10px;padding:3px;margin-bottom:6px;}
.tabs button{
  position:relative;flex:1;height:32px;border:none;background:none;border-radius:8px;
  font-size:13px;color:var(--muted);cursor:pointer;transition:.15s;
}
.tabs button.on{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.badge{
  display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 5px;margin-left:5px;
  border-radius:9px;background:#eb5757;color:#fff;font-size:11px;font-weight:600;vertical-align:1px;
}
.tab-pane section{padding:14px 0;border-top:1px dashed var(--line);}
.tab-pane section:first-child{border-top:none;padding-top:12px;}
.tab-pane h2{font-size:13px;margin:0 0 4px;font-weight:600;}
.hint{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.55;}
.sub-label{font-size:11.5px;color:var(--muted);margin:10px 0 6px;}

/* 班次行 */
.shift-item{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:#fcfcff;}
.shift-row{display:flex;align-items:center;gap:7px;}
.shift-row .idx{width:14px;font-size:11px;color:var(--muted);text-align:right;flex:none;}
input[type="color"]{
  width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;
  background:none;cursor:pointer;flex:none;
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:3px;}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px;}
.shift-row input.sname{
  flex:1;min-width:0;height:28px;padding:0 9px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:inherit;
}
.shift-row input.sname:focus{outline:none;border-color:var(--accent);}
.shift-sub{display:flex;align-items:center;gap:7px;margin-top:7px;padding-left:21px;}
.shift-sub label{font-size:11.5px;color:var(--muted);flex:none;}
.shift-sub select{
  flex:1;min-width:0;height:28px;padding:0 6px;font-size:12.5px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:inherit;
}
.shift-sub select:focus{outline:none;border-color:var(--accent);}

.icon-btn{
  width:26px;height:26px;flex:none;border:1px solid var(--line);background:#fff;
  border-radius:7px;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.15s;
}
.icon-btn:hover{background:#eef2fd;color:var(--accent);border-color:#c9d8fb;}
.icon-btn.danger:hover{background:#fdecec;color:#eb5757;border-color:#f7c9c9;}
.icon-btn:disabled{opacity:.3;cursor:not-allowed;}

.add-btn{
  width:100%;height:32px;border:1px dashed #c3d0ea;background:#f7f9ff;color:var(--accent);
  border-radius:8px;cursor:pointer;font-size:13px;transition:.15s;
}
.add-btn:hover{background:#eef2fd;border-color:var(--accent);}

.field-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.field-row label{font-size:12px;color:var(--muted);}
.field-row input[type="date"]{
  height:30px;padding:0 8px;font-size:13px;border:1px solid var(--line);
  border-radius:8px;background:#fbfbfe;color:inherit;
}
.field-row input[type="date"]:focus{outline:none;border-color:var(--accent);}

.anchor-grid{display:flex;flex-wrap:wrap;gap:6px;}
.anchor-btn{
  border:1.5px solid transparent;border-radius:8px;padding:5px 10px;font-size:12px;
  cursor:pointer;color:#fff;opacity:.5;transition:.15s;
}
.anchor-btn:hover{opacity:.82;}
.anchor-btn.on{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ring);}

.cycle-preview{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;color:var(--muted);}
.mini-chip{border-radius:6px;padding:3px 8px;color:#fff;font-size:11px;white-space:nowrap;}

.save-status{font-size:12px;color:var(--muted);margin:4px 0 0;min-height:17px;}
.save-status.ok{color:#27ae60;}
.save-status.err{color:#eb5757;}

/* 好友 */
.search-box{display:flex;gap:6px;}
.search-box input{
  flex:1;min-width:0;height:32px;padding:0 10px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;background:#fbfbfe;color:inherit;
}
.search-box input:focus{outline:none;border-color:var(--accent);background:#fff;}
.mini-btn{
  height:32px;padding:0 12px;border:none;border-radius:8px;background:var(--accent);
  color:#fff;font-size:12.5px;cursor:pointer;flex:none;transition:.15s;
}
.mini-btn:hover{background:#3d73e6;}
.list{margin-top:8px;}
.empty-tip{font-size:12px;color:var(--muted);padding:6px 0;}

.user-item,.friend-item{
  display:flex;align-items:center;gap:8px;padding:8px 9px;
  border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:#fcfcff;
}
.user-item .uname,.friend-item .uname{
  font-size:13px;font-weight:500;flex:none;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-item .ustat{font-size:11.5px;color:var(--muted);flex:1;min-width:0;}
.friend-item .relation-input{
  flex:1;min-width:0;height:28px;padding:0 8px;font-size:12.5px;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:inherit;
}
.friend-item .relation-input:focus{outline:none;border-color:var(--accent);}
.friend-item .relation-saved{font-size:11px;color:#27ae60;flex:none;opacity:0;transition:.2s;}
.friend-item .relation-saved.show{opacity:1;}
.tag-btn{
  height:26px;padding:0 10px;border:1px solid #c9d8fb;background:#eef2fd;color:var(--accent);
  border-radius:7px;font-size:12px;cursor:pointer;flex:none;transition:.15s;
}
.tag-btn:hover{background:#e0e9fc;}
.tag-btn.warn{border-color:#f7c9c9;background:#fdecec;color:#eb5757;}
.tag-btn.warn:hover{background:#fbdcdc;}
.tag-btn:disabled{opacity:.45;cursor:not-allowed;}

/* ============ 日历 ============ */
.cal-wrap{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.cal-head .title{font-size:18px;font-weight:600;letter-spacing:.5px;min-width:142px;}
.nav-btn{
  width:30px;height:30px;border:1px solid var(--line);background:#fbfbfe;border-radius:8px;
  cursor:pointer;font-size:15px;color:var(--text);line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.nav-btn:hover{background:#eef2fd;border-color:#c9d8fb;color:var(--accent);}
.today-btn{
  height:30px;padding:0 12px;border:1px solid var(--line);background:#fbfbfe;border-radius:8px;
  cursor:pointer;font-size:12px;color:var(--text);transition:.15s;
}
.today-btn:hover{background:#eef2fd;border-color:#c9d8fb;color:var(--accent);}
.date-btn{
  height:32px;padding:0 15px;border:none;border-radius:9px;
  background:linear-gradient(135deg,#ff6fa5,#ff4d8d);color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:0 3px 10px rgba(255,77,141,.28);transition:.15s;
}
.date-btn:hover{filter:brightness(1.05);transform:translateY(-1px);}
.partner-picker{display:flex;align-items:center;gap:8px;}
.partner-picker .lbl{font-size:12px;color:var(--muted);}
.partner-picker select{
  height:30px;max-width:150px;padding:0 8px;font-size:13px;border:1px solid var(--line);
  border-radius:8px;background:#fbfbfe;color:inherit;
}
.partner-picker select:focus{outline:none;border-color:var(--pink);}

.date-banner{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:10px 14px;border-radius:10px;
  background:var(--pink-bg);border:1px solid var(--pink-line);color:var(--pink-text);
  font-size:13px;line-height:1.5;
}
.date-banner .big{font-size:17px;font-weight:700;}
.date-banner .hl{color:#ff4d8d;}

.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.weekdays span{text-align:left;font-size:12px;color:var(--muted);padding:4px 7px;}
.weekdays span.we{color:#eb5757;opacity:.75;}

.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cell{
  position:relative;min-height:74px;min-width:0;border-radius:10px;border:1px solid transparent;
  background:#fbfbfe;padding:7px 5px;display:flex;flex-direction:column;gap:4px;transition:.12s;
}
.cell-top{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;}
.cell-left{display:flex;align-items:center;gap:5px;flex:1;min-width:0;}
.cell .dnum{font-size:12px;font-weight:600;color:#5b6474;flex:none;}
.cell .lunar{
  font-size:10.5px;color:var(--muted);font-weight:400;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.cell .lunar.lunar-fest{color:var(--pink-text);font-weight:500;}
.cell .lunar.lunar-term{color:#27ae60;font-weight:500;}
.cell .lunar .holi-tag{
  display:inline-block;font-size:9px;font-weight:600;padding:1px 3px;border-radius:3px;
  margin-right:2px;line-height:1.3;vertical-align:1px;color:#fff;
}
.cell .lunar .holi-rest{background:#eb5757;}
.cell .lunar .holi-work{background:var(--accent);}
.cell .chip{
  margin-top:auto;width:100%;box-sizing:border-box;border-radius:6px;padding:2px 4px;
  font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.cell.out{border-style:dashed;border-color:var(--line);background:#fff;opacity:.4;}
.cell.out .dnum{color:var(--muted);font-weight:500;}
.cell.today{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,134,247,.15);}
.cell.today .dnum{color:#fff;background:var(--accent);border-radius:6px;padding:1px 6px;align-self:flex-start;}

/* 约会日 */
.cell.date-day{background:var(--pink-bg);border-color:var(--pink-line);}
.cell.date-day.today{border-color:var(--accent);}
.heart{
  position:absolute;top:7px;right:5px;z-index:1;
  color:var(--pink);font-size:12px;line-height:1;animation:beat 2s ease-in-out infinite;
}
@keyframes beat{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}

/* 双人日历 */
.grid.couple .cell{min-height:94px;}
.pchips{display:flex;flex-direction:column;gap:3px;margin-top:auto;width:100%;}
.pchip{
  border-radius:5px;padding:2px 3px;font-size:11px;color:#fff;line-height:1.55;
  width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.pchip.me{background:var(--me);}
.pchip.ta{background:var(--ta);}
.pchip.free{opacity:.55;}
.pchip.none{background:#e3e7f1;color:#98a2b8;}

.legend{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line);font-size:12px;color:var(--muted);
}
.legend .item{display:flex;align-items:center;gap:5px;}
.legend .dot{width:10px;height:10px;border-radius:3px;flex:none;}
.legend .heart-ico{color:var(--pink);}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  background:rgba(31,36,48,.92);color:#fff;font-size:13px;padding:10px 18px;border-radius:10px;
  z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:80vw;text-align:center;
}

@media (max-width:960px){
  .app{flex-direction:column;padding:12px;}
  .panel{position:static;flex:none;width:100%;}
  .cal-wrap{width:100%;padding:10px;}
  .grid{gap:4px;}
  .weekdays span{padding:4px 3px;font-size:11.5px;}
  .cell{min-height:62px;padding:7px 3px;}
  .grid.couple .cell{min-height:80px;}
  .cell .chip,.pchip{font-size:10.5px;padding:1px 2px;letter-spacing:-0.3px;}
  .cal-head .title{min-width:auto;font-size:16px;}
  .cell-left{gap:3px;}
  .cell .dnum{font-size:11px;}
  .cell .lunar{font-size:9.5px;}
  .cell .lunar .holi-tag{font-size:8px;padding:0 2px;margin-right:1px;line-height:1.2;}
  .cell.today .dnum{padding:1px 4px;}
  .heart{top:7px;right:3px;font-size:11px;}
}

@media (max-width:380px){
  .cal-wrap{padding:8px;}
  .grid{gap:3px;}
  .cell{padding:7px 2px;}
  .cell .chip,.pchip{font-size:10px;padding:1px 1px;letter-spacing:-0.5px;}
  .cell-left{gap:2px;}
  .cell .dnum{font-size:10px;}
  .cell .lunar{font-size:7.5px;letter-spacing:-0.3px;}
  .cell .lunar .holi-tag{font-size:7px;padding:0 1px;margin-right:1px;line-height:1.15;}
  .cell.today .dnum{padding:1px 3px;}
  .heart{top:6px;right:2px;font-size:10px;}
}