:root{
  --bg: #F7F2EF;
  --card: #FFFDFB;
  --ink: #3E3A39;
  --muted: #7E7773;

  --pink: #E7C7C2;
  --sage: #B8C7B0;
  --oat:  #E8DCCF;
  --sky:  #BFCED8;

  --warn: #E3B96A;
  --bad:  #D38D85;

  --shadow: 0 10px 30px rgba(60, 50, 40, .10);
  --radius: 18px;

  --compactW: 260px; /* ✅ 图三：统一宽度 */
  --ctrlH: 42px;     /* ✅ 图三：统一高度 */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Arial;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 20% 0%, #F3E7E3 0%, transparent 60%),
              radial-gradient(1200px 600px at 80% 0%, #E7EFE5 0%, transparent 60%),
              var(--bg);
}

.app{
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px 24px;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.brand{
  display:flex;
  gap: 12px;
  align-items:center;
}

.logo{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--pink), var(--oat));
  box-shadow: var(--shadow);
}

h1{
  margin:0;
  font-size: 22px;
  letter-spacing: .5px;
}
.sub{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.header-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.header-actions .btn,
.header-actions .file-like{
  color: var(--ink) !important;
  font-weight: 500;
}
.header-actions button{
  color: var(--ink) !important;
}

.grid{
  display:grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: 14px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(120,100,90,.10);
  padding: 16px;
}

.card-title{
  display:flex;
  align-items:baseline;
  gap: 10px;
  justify-content:space-between;
  margin-bottom: 10px;
}
.card-title h2{
  margin:0;
  font-size: 16px;
}
.hint{
  color: var(--muted);
  font-size: 12px;
}

.notice{
  background: linear-gradient(135deg, rgba(227,185,106,.25), rgba(231,199,194,.18));
  border: 1px solid rgba(227,185,106,.35);
  border-radius: 16px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 10px 0 14px;
}
.notice-left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(60,50,40,.12);
}
.pill-warn{ background: rgba(227,185,106,.25); }

.form .row{
  margin: 10px 0;
}
.row.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.row.two.align-top{ align-items: start; }
.row.two.align-end{ align-items: end; }

.label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.req{
  color: #C4473D;      /* 更深的红色（偏柔和，不刺眼） */
  margin-left: 4px;
  font-size: 15px;     /* 原来大概12~13，稍微放大一点 */
  font-weight: 600;   /* 稍微加粗，更醒目 */
  vertical-align: middle;
}


.input{
  width:100%;
  height: var(--ctrlH);
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(120,100,90,.18);
  background: #FFFFFF;
  outline:none;
  font-size: 14px;
  pointer-events: auto;
}
.input:focus{
  border-color: rgba(184,199,176,.9);
  box-shadow: 0 0 0 4px rgba(184,199,176,.20);
}

.subtip{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.subtip-wide{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

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

.btn{
  border: 0;
  border-radius: 14px;
  height: var(--ctrlH);
  padding: 0 12px;
  font-size: 14px;
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease;
  user-select:none;
  pointer-events: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--sage), var(--sky));
  color: #233;
}
.btn-soft{
  background: rgba(232,220,207,.65);
  color: #3E3A39;
  border: 1px solid rgba(120,100,90,.12);
}
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(120,100,90,.20);
  color: var(--ink);
}
.btn-danger{
  background: rgba(211,141,133,.22);
  border: 1px solid rgba(211,141,133,.35);
  color: #5B2E2A;
}

.file-like{ position: relative; overflow:hidden; }
.file-like input{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
}

.divider{
  height:1px;
  background: rgba(120,100,90,.12);
  margin: 14px 0;
}

.settings h3{
  margin:0 0 10px;
  font-size: 14px;
}

.setting-row{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px dashed rgba(120,100,90,.16);
  align-items:center;
  position: relative;
  z-index: 1;
}
.setting-row:first-of-type{ border-top: 0; }

.setting-label{
  font-size: 13px;
  color: var(--ink);
}

.setting-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width: var(--compactW);
}

.mini-left{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align:left;
  margin-top: 2px;
}

.danger-zone{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}

/* 列表 */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tab{
  border: 1px solid rgba(120,100,90,.16);
  background: rgba(232,220,207,.45);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 13px;
}
.tab.active{
  background: rgba(184,199,176,.38);
  border-color: rgba(184,199,176,.55);
}

.search{
  min-width: 220px;
  flex: 1;
  display:flex;
  justify-content:flex-end;
}

.list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.item{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(120,100,90,.14);
  background: rgba(255,255,255,.70);
}
.item-left{ min-width: 0; }
.item-title{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120,100,90,.14);
}
.badge.ok{ background: rgba(143,175,147,.18); }
.badge.soon{ background: rgba(227,185,106,.22); }
.badge.today{ background: rgba(191,206,216,.28); }
.badge.expired{ background: rgba(211,141,133,.20); }
.badge.done{ background: rgba(232,220,207,.55); }

.name{
  font-weight: 650;
  font-size: 14px;
}
.meta{
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.meta b{ color: var(--ink); }

.item-actions{
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items:flex-end;
}
.item-actions .btn{
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
}

.empty{
  padding: 24px 10px 10px;
  text-align:center;
  color: var(--muted);
}
.empty-emoji{ font-size: 40px; }
.empty-title{
  margin-top: 8px;
  color: var(--ink);
  font-weight: 650;
}
.empty-sub{
  margin-top: 4px;
  font-size: 12.5px;
}

/* 表单内联：保质期 */
.inline{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 8px;
}

/* ✅ 图三：统一宽度与对齐 */
.select-compact{
  width: var(--compactW);
  max-width: var(--compactW);
}

.inline-compact{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:space-between;
}
.fixed-compact{
  width: var(--compactW);
}

.input-narrow{
  width: 92px;
  padding: 0 12px;
}

.btn-compact{
  flex: 1;
  min-width: 72px;
  border-radius: 14px;
}

.footer{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 6px 0;
  color: var(--muted);
  font-size: 12px;
}

/* 弹窗 */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(30, 25, 22, .25);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 9999;
}
.modal[hidden]{ display:none !important; }
[hidden]{ display:none !important; }

.modal-card{
  width: min(760px, 96vw);
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(120,100,90,.14);
  overflow:hidden;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
  background: linear-gradient(135deg, rgba(231,199,194,.25), rgba(184,199,176,.22));
}
.modal-title{ font-weight: 700; }
.modal-sub{ color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.modal-body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 60vh;
  overflow:auto;
}

.remain-strong{
  color: #C4473D;
  font-weight: 700;
}

.copyright{
  text-align: center;
  font-size: 12px;
  color: #9A938F;
  margin-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .search{ justify-content:stretch; }
  .setting-right{ min-width: unset; width: 100%; justify-content:flex-start; }
  .select-compact{ width: 100%; max-width: 100%; }
  .fixed-compact{ width: 100%; }
}


/* ============ 手机端增强（<=520px） ============ */
@media (max-width: 520px){

  .app{
    margin: 14px auto;
    padding: 0 12px 18px;
  }

  .header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .header-actions{
    width: 100%;
  }
  .header-actions .btn,
  .header-actions .file-like{
    flex: 1;
    min-width: 0;
  }

  .brand{
    align-items: flex-start;
  }
  h1{ font-size: 20px; }
  .sub{ font-size: 12px; }

  /* 表单两列 -> 一列（手机最好用） */
  .row.two{
    grid-template-columns: 1fr;
  }

  /* 保质期那行（数字+单位）在手机上更紧凑 */
  .inline{
    grid-template-columns: 1fr 110px;
  }

  /* 提醒设置：下拉与自定义整行铺满 */
  .setting-row{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .setting-right{
    justify-content: flex-start;
    width: 100%;
    min-width: unset;
  }
  .select-compact{
    width: 100%;
    max-width: 100%;
  }
  .fixed-compact{
    width: 100%;
  }

  /* 自定义提醒：三个控件在手机上一行放不下就自动换行 */
  .inline-compact{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .input-narrow{
    width: 110px;
  }
  .btn-compact{
    width: 100%;
  }

  /* tabs 更容易点按 */
  .tab{
    padding: 10px 12px;
    font-size: 13px;
  }

  /* 搜索框占满 */
  .search{
    width: 100%;
    justify-content: stretch;
  }

  /* 列表卡片更紧凑 */
  .item{
    padding: 10px;
    border-radius: 14px;
  }
  .item-actions{
    gap: 6px;
  }

  /* 底部两行显示，避免挤在一行 */
  .footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* ===== 手机端 BUG 修复覆盖（只影响 <=520px） ===== */

  /* 图一：标题一行 + 右侧按钮靠右，不要变成两块大按钮 */
  .header{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .brand{
    flex: 1;
    min-width: 0; /* 让标题可以省略号 */
  }

  h1{
    white-space: nowrap;         /* 尽量一行 */
    overflow: hidden;
    text-overflow: ellipsis;     /* 太长就省略号，不换行 */
    font-size: 20px;
  }

  .header-actions{
    width: auto;                 /* 覆盖你原来 width:100% */
    display: flex;
    flex-direction: column;      /* 两个按钮竖排（跟你截图一致） */
    align-items: flex-end;       /* ✅ 右对齐 */
    gap: 8px;
  }

  .header-actions .btn,
  .header-actions .file-like{
    flex: 0;                     /* 覆盖你原来 flex:1 */
    width: 108px;                /* ✅ 两个按钮统一宽度 */
    height: 40px;
  }

  /* 图三：备注 placeholder 太长导致显示不下 -> 让输入框内容不要被截得难看 */
  #note{
    font-size: 13px;
  }

  /* 图四：提前提醒 & 自定义提醒 保持一行（不要上下堆叠） */
  .setting-row{
    flex-direction: row;         /* 覆盖你原来 column */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .setting-label{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .setting-right{
    width: auto;                 /* 覆盖你原来 width:100% */
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .select-compact{
    width: 210px;                /* ✅ 下拉框缩窄 */
    max-width: 210px;
  }

  /* 自定义提醒那排：整体宽度跟下拉一致 + 应用按钮不再占满 */
  .fixed-compact{
    width: 210px;
  }

  .inline-compact{
    flex-wrap: nowrap;           /* ✅ 尽量一行 */
    justify-content: flex-end;
  }

  .input-narrow{
    width: 72px;                 /* 数字输入更窄 */
  }

  #remindUnit{
    width: 72px;                 /* 单位下拉更窄 */
  }

  .btn-compact{
    width: auto;                 /* 覆盖你原来 width:100% */
    min-width: 62px;
    height: var(--ctrlH);
  }

  /* 图五：列表里“到期：xxxx”不要跑到右边，改成手机端一行一行左对齐 */
  .meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* 图六：已吃完/编辑/删除 三个按钮一样大（只手机） */
  .item-actions{
    align-items: flex-end;
  }

  .item-actions .btn{
    width: 76px;
    height: 38px;
    padding: 0;
  }

}


/* ===== LICENSE GATE ===== */
body.license-locked #appRoot{
  filter: blur(10px);
  transform: scale(1.01);
  pointer-events: none;
  user-select: none;
}

.license-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}

body.license-locked .license-modal{
  display: flex;
}

.license-card{
  width: min(720px, 96vw);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 28px 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  text-align: center;
}

.license-icon{
  font-size: 44px;
  margin-bottom: 10px;
}

.license-card h2{
  margin: 0 0 10px;
  font-size: 30px;
  letter-spacing: .5px;
}

.license-sub{
  margin: 0 auto 18px;
  max-width: 40em;
  opacity: .8;
  line-height: 1.6;
}

.license-row{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 6px;
}

.license-input{
  width: min(440px, 70vw);
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 14px;
  font-size: 16px;
  outline: none;
}

.license-input:focus{
  border-color: rgba(76,175,80,.55);
  box-shadow: 0 0 0 4px rgba(76,175,80,.18);
}

.license-btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #9fb5a5;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.license-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}

.license-msg{
  min-height: 22px;
  margin-top: 8px;
  font-size: 14px;
}

.license-msg.ok{ color: #1b7f3a; }
.license-msg.err{ color: #c0392b; }

.license-footer{
  margin-top: 18px;
  font-size: 13px;
  opacity: .75;
}

.license-author{
  font-weight: 700;
}