/* =====================================================
   LEAF Trip · Schedule iOS 27 Liquid Glass
===================================================== */

html,
body{
  margin:0;

  background:
    radial-gradient(
      circle at 92% -5%,
      rgba(117,165,255,.20),
      transparent 32%
    ),

    radial-gradient(
      circle at 0% 35%,
      rgba(198,215,255,.16),
      transparent 36%
    ),

    linear-gradient(
      180deg,
      #F9FBFF,
      #F1F6FB
    )

    !important;

  color:#111820;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "PingFang SC",
    sans-serif;
}


/* 主布局 */
.layout{
  background:transparent !important;
}


/* 月历区域 */
.calendar-wrap{
  background:transparent !important;

  padding:
    14px 14px 18px !important;
}


/* 顶部年月控制 */
.toolbar{
  position:relative;

  padding:
    6px 4px 12px;

  margin-bottom:
    5px !important;
}


.month-title{
  font-size:
    26px !important;

  font-weight:
    780 !important;

  letter-spacing:
    -1px;
}


.toolbar button{

  min-width:
    44px;

  min-height:
    44px;

  border:
    1px solid
    rgba(255,255,255,.82) !important;

  border-radius:
    16px !important;

  color:
    #17212A;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.69),
      rgba(225,239,255,.38)
    )

    !important;


  backdrop-filter:
    blur(24px)
    saturate(190%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(190%);


  box-shadow:

    0 8px 22px
    rgba(60,84,125,.07),

    inset 0 1px 0
    rgba(255,255,255,.98);
}


/* 星期 */
.week{
  margin-bottom:
    5px;
}


.week div{
  color:
    rgba(38,49,59,.44) !important;

  font-size:
    11px !important;

  font-weight:
    580;
}


/* 整个月历是一块玻璃 */
.calendar{

  overflow:hidden;

  border-radius:
    28px;

  border:
    1px solid
    rgba(255,255,255,.80);

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.57),
      rgba(231,242,255,.32)
    );


  backdrop-filter:
    blur(28px)
    saturate(190%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(190%);


  box-shadow:

    0 18px 42px
    rgba(55,78,112,.075),

    inset 0 1px 0
    rgba(255,255,255,.98);
}


/* 日期格 */
.day{
  min-height:
    83px !important;

  padding:
    8px 7px !important;

  background:
    rgba(255,255,255,.20) !important;

  border-color:
    rgba(91,108,125,.07) !important;

  transition:
    transform .16s ease,
    background .20s ease;
}


.day-number{
  font-size:
    15px !important;

  font-weight:
    710 !important;
}


/* 农历 */
.lunar{
  margin-top:
    3px !important;

  color:
    rgba(51,66,77,.43) !important;

  font-size:
    9px !important;
}


/* 非本月 */
.day.other{
  opacity:
    .30 !important;
}


/* 今天 */
.day.today:not(.selected){

  background:
    rgba(215,233,255,.40) !important;
}


/* 选中的日期 = Liquid Glass Drop */
.day.selected{

  position:relative;

  color:
    #fff !important;

  background:

    radial-gradient(
      circle at 30% 0%,
      rgba(255,255,255,.34),
      transparent 48%
    ),

    linear-gradient(
      145deg,
      #398AFB,
      #617FF4
    )

    !important;


  border-color:
    rgba(255,255,255,.62) !important;


  box-shadow:

    0 10px 28px
    rgba(53,103,221,.26),

    inset 0 1px 0
    rgba(255,255,255,.55)

    !important;


  transform:
    scale(.96);
}


.day.selected .day-number{
  color:#fff !important;
}


.day.selected .lunar{
  color:
    rgba(255,255,255,.72) !important;
}


/* 日历中的行程 */
.event{

  margin-top:
    4px !important;

  padding:
    3px 5px !important;

  border-radius:
    7px !important;

  color:
    #1768BE;

  background:
    rgba(216,235,255,.62) !important;
}


.day.selected .event{

  color:#fff;

  background:
    rgba(255,255,255,.16) !important;
}


/* =====================================================
   下方详情 / 备忘录
===================================================== */

.detail{

  border:0 !important;

  background:

    radial-gradient(
      ellipse at 30% 0%,
      rgba(255,255,255,.90),
      transparent 46%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.69),
      rgba(231,241,255,.40)
    )

    !important;


  backdrop-filter:
    blur(34px)
    saturate(195%) !important;

  -webkit-backdrop-filter:
    blur(34px)
    saturate(195%) !important;


  box-shadow:

    0 -12px 38px
    rgba(55,78,112,.10),

    inset 0 1px 0
    rgba(255,255,255,.98)

    !important;
}


.detail-date{

  font-size:
    20px !important;

  font-weight:
    760 !important;

  letter-spacing:
    -.6px;
}


.detail-lunar{

  color:
    rgba(45,59,70,.44) !important;
}


/* 当天行程 / 备忘录标题 */
.section-title{

  font-size:
    13px !important;

  font-weight:
    700 !important;
}


/* 日程卡、备忘卡 */
.detail .card{

  border:
    1px solid
    rgba(255,255,255,.80) !important;

  border-radius:
    18px !important;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(228,241,255,.36)
    )

    !important;


  box-shadow:

    0 8px 22px
    rgba(60,82,115,.06),

    inset 0 1px 0
    rgba(255,255,255,.96)

    !important;
}


/* 新增备忘 */
.add-btn{

  border-radius:
    18px !important;

  border:
    1px solid
    rgba(255,255,255,.82) !important;

  color:
    #087BF5 !important;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(210,233,255,.43)
    )

    !important;


  box-shadow:

    0 9px 24px
    rgba(10,132,255,.10),

    inset 0 1px 0
    rgba(255,255,255,1)

    !important;
}


/* =====================================================
   手机
===================================================== */

@media(max-width:760px){

  .calendar-wrap{
    padding:
      10px 10px 220px !important;
  }


  .day{
    min-height:
      70px !important;

    padding:
      6px 5px !important;
  }


  .calendar{
    border-radius:
      24px;
  }


  .detail{

    border-radius:
      26px 26px 0 0 !important;

    max-height:
      39vh !important;
  }

}
