:root{

  /* 品牌色（减少使用） */
  --brand:#00837e;
  --brand-soft:#e6f3f2;
  --brand-deep:#0c5e5a;

  /* 页面结构色 */
  --bg:#f2f4f6;
  --card:#ffffff;

  --ink:#1c252b;
  --muted:#6b7a86;

  --line:#dfe5ea;
  --line-soft:#eef2f5;

  /* 阴影 */
  --shadow:0 6px 18px rgba(0,0,0,.06);

  --radius:14px;
  --radius-sm:10px;

  /* 周末 */
  --weekend:#fff4f2;

  /* 节气（红色） */
  --solar:#d95a4b;
  --solar-bg:#ffe7e3;

  /* 节日（黄色） */
  --festival:#e2a84c;
  --festival-bg:#fff3dc;

  /* 纪念日（蓝色） */
  --memory:#4f8fa1;
  --memory-bg:#e7f3f6;

  /* 全球事件 */
  --global-bg:#eef1ff;
  --global-bd:#d6dcff;
  --global-tx:#4b63b6;

  /* 记事 */
  --note-red:#c93c32;
  --note-red-bg:#ffe5e3;
  --note-red-bd:#f0b4b0;

}

*{
  box-sizing:border-box;
}
.chip.solar{
  background:var(--solar-bg);
  color:var(--solar);
}

.chip.festival{
  background:var(--festival-bg);
  color:var(--festival);
}

.chip.memory{
  background:var(--memory-bg);
  color:var(--memory);
}
html,body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

button,input,textarea,select{
  font:inherit;
}

body{
  min-width:1280px;
}

.wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding:14px 16px 18px;
}

.layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:16px;
  align-items:start;
  min-height:calc(100vh - 28px);
}

.sidebar{
  padding:18px;
  position:sticky;
  top:14px;
  height:calc(100vh - 28px);
  overflow:auto;
}

.content{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
  width:100%;
}

.month-section{
  padding:18px;
}

.calendar-grid-wrap{
  overflow-x:visible;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  min-width:0;
  width:100%;
}


.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.sidebar{
  padding:18px;
  position:sticky;
  top:16px;
  height:calc(100vh - 32px);
  overflow:auto;
}

.sidebar::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:#d7e2e7;
  border-radius:999px;
}

.sidebar-brand{
  padding-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}

.brand-row{
  display:flex;
  align-items:center;
    justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中（如果需要） */
  gap:14px;
  margin: 60px 0;
}

.brand-mark{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand-deep);
  border:1px solid #cfe8e5;
  font-size:20px;
  font-weight:800;
  flex:0 0 auto;
}

.brand-name{
  font-size:15px;
  font-weight:700;
  color:var(--dark);
  letter-spacing:.03em;
}

.sidebar-title{
  margin-top:16px;
  font-size:26px;
  line-height:1.2;
  font-weight:800;
  color:var(--dark);
}

.sidebar-desc{
  margin-top:12px;
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#f7fbfb;
  border:1px solid var(--line);
  color:#415862;
  font-size:12px;
  font-weight:600;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.btn{
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:6px 8px;
  font-weight:700;
  transition:.18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-soft);
}

.btn-ghost{
  background:#fff;
  color:var(--dark);
  border:1px solid var(--line);
}

.sidebar-block{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

.panel-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  margin-bottom:10px;
}

.search{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#fff;
}

.search:focus,
textarea:focus,
.note-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,131,126,.12);
}

.seg{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.seg button{
  border:none;
  cursor:pointer;
  background:#f1f6f6;
  color:var(--ink);
  padding:9px 12px;
  border-radius:999px;
  font-weight:700;
  transition:.18s ease;
}

.seg button.active{
  background:var(--brand);
  color:#fff;
}

.month-jump{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}

.month-btn{
  border:1px solid var(--line);
  background:#fafcfc;
  border-radius:12px;
  padding:10px 0;
  cursor:pointer;
  font-weight:700;
  color:var(--ink);
}

.month-btn.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}

.stat{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdfd;
  padding:12px;
}

.stat b{
  display:block;
  font-size:20px;
  color:var(--brand-deep);
  line-height:1.1;
}

.stat span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

textarea{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  line-height:1.75;
  background:#fff;
  outline:none;
}

.tip{
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:8px;
}



.month-section{
  padding:20px;
}

.month-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.month-head h2{
  margin:0;
  font-size:28px;
  color:var(--dark);
}

.month-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.head-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mini-tag{
  font-size:11px;
  font-weight:700;
  color:var(--brand-deep);
  background:var(--brand-soft);
  padding:7px 10px;
  border-radius:999px;
}




.weekday{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  padding:4px 0 2px;
}

.day{
  min-height:190px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:.15s ease;
}

.day:hover{
  border-color:#cfd7dd;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.day.empty{
  min-height:96px;
  background:#f8fbfc;
  border-style:dashed;
}

.day.weekend{
  background:var(--weekend);
}

.day.holiday{
  background:var(--holiday);
}

.day.has-event{
  border-color:#b9d9d6;
}

.day-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.day-no{
  font-size:18px;
  font-weight:800;
  color:var(--dark);
}

.holiday-tag{
  font-size:10px;
  font-weight:800;
  background:#fff0e3;
  color:#9b5a12;
  padding:4px 7px;
  border-radius:999px;
  white-space:nowrap;
}

.day-event-chips,
.chips{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:42px;
}

.day.today{
  border:2px solid var(--brand);
  background:#e6f3f2;
  position:relative;
}

.day.today::after{
  content:"今日";
  position:absolute;
  top:6px;
  right:6px;
  font-size:10px;
  color:var(--brand-deep);
  font-weight:700;
  background:#fff;
  padding:1px 4px;
  border-radius:4px;
}

.chip{
  display:block;
  font-size:11px;
  line-height:1.35;
  padding:5px 7px;
  border-radius:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid #cfeae6;
  background:#f3faf9;
  color:#114542;
}

.chip.global{
  background:var(--global-bg);
  border-color:var(--global-bd);
  color:var(--global-tx);
}

.day-note-zone{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:42px;
}

.note-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:4px;
}

.note-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #f0a3a0;
  background:#ffe3e1;
  color:#b42318;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  box-shadow:0 1px 0 rgba(180,35,24,.05);
}

.note-tag-text{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.note-tag-remove{
  border:none;
  background:transparent;
  color:var(--note-red);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0;
  margin:0;
  font-weight:800;
}

.note-trigger{
  align-self:flex-start;
  border:1px dashed var(--note-trigger-bd);
  background:var(--note-trigger-bg);
  color:var(--note-trigger-tx);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:.16s ease;
}

.note-trigger:hover{
  border-color:#c8d4da;
  color:#596d77;
  background:#f4f8fa;
}

.note-editor{
  width:100%;
}

.note-input{
  width:100%;
  height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 10px;
  background:#fff;
  outline:none;
  font-size:12px;
  color:var(--ink);
}

.section-subtitle{
  margin:18px 0 10px;
  font-size:15px;
  font-weight:800;
  color:#102030;
}


.month-event-list{
  display:grid;
  
  gap:12px;
}
.event-list{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4,1fr);
}
.event-item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#fcfefe);
}

.event-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.event-date{
  font-size:13px;
  font-weight:800;
  color:var(--brand-deep);
}

.badge{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
}

.badge.china{
  background:var(--brand-soft);
  color:var(--brand-deep);
}

.badge.global{
  background:var(--global-bg);
  color:var(--global-tx);
}

.event-item h3{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.4;
}

.event-desc{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}

.tags,
.event-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.tag{
  font-size:11px;
  color:#52636b;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 9px;
  background:#fff;
}

.event-note-box{
  margin-top:10px;
}

.event-note-input{
  min-height:110px;
}

.checklist,
.month-checklist{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:14px;
  background:#fbfdfd;
}

.checklist ul,
.month-checklist ul{
  margin:8px 0 0;
  padding-left:18px;
  line-height:1.85;
  font-size:13px;
}

.checklist li,
.month-checklist li{
  margin:2px 0;
}

.empty-state{
  padding:28px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:16px;
  background:#fff;
}

.footer{
  padding:16px 6px 26px;
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
}

[hidden]{
  display:none !important;
}

@media (max-width:1180px){
  .layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
    top:0;
    height:auto;
    overflow:visible;
  }

  .event-list,
  .month-event-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  .wrap{
    padding:14px;
  }

  .sidebar-title{
    font-size:22px;
  }

  .month-head h2{
    font-size:24px;
  }

  .stats{
    grid-template-columns:1fr 1fr 1fr;
  }
}





@media (min-width:1600px){
  .layout{
    grid-template-columns:380px minmax(0,1fr);
    gap:18px;
  }

  .month-head h2{
    font-size:30px;
  }

  .day{
    min-height:210px;
  }
}

@media (max-width:1180px){
  body{
    min-width:0;
  }

  .layout{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .sidebar{
    position:relative;
    top:0;
    height:auto;
    overflow:visible;
  }

.month-event-list{
  width:100%;
}

.event-list,
.month-event-list > .event-list{
  display:grid;
  width:100%;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
  .calendar-grid-wrap{
    overflow-x:auto;
  }

  .calendar-grid{
    min-width:1120px;
  }
}






.event-item{
  width:100%;
  min-width:0;
}

@media (min-width:1600px){
  .event-list,
  .month-event-list > .event-list{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width:1180px){
  .event-list,
  .month-event-list > .event-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:780px){
  .event-list,
  .month-event-list > .event-list{
    grid-template-columns:1fr;
  }
}