/* 添饭 · 网页版样式
   尺寸基准：设计稿 750px 宽。1rem = 100 设计像素，由 JS 按容器宽度换算。 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #120C0A;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overscroll-behavior: none;
}

body { display: flex; justify-content: center; }

#phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  transition: background .25s ease;
}

#views {
  position: absolute;
  inset: 0 0 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1.9rem + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
#views::-webkit-scrollbar { display: none; }

/* ---------- 通用 ---------- */
.screen { padding: 0 0 .3rem; animation: fade .18s ease; }
@keyframes fade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.top { display: flex; align-items: flex-end; justify-content: space-between; padding: .28rem .36rem .22rem; }
.brand { display: flex; align-items: center; gap: .14rem; }
.brand img { width: .68rem; height: .68rem; object-fit: contain; transform: rotate(-6deg); }
.brand-name { font-size: .46rem; font-weight: 800; letter-spacing: .02rem; line-height: 1; }
.brand-sub { font-size: .19rem; color: var(--text3); margin-top: .08rem; font-weight: 600; }
.chip-date {
  padding: .12rem .22rem; border-radius: 999px; background: var(--card);
  border: .02rem solid var(--line); font-size: .22rem; color: var(--text2);
  box-shadow: 0 .04rem 0 var(--hard); font-weight: 600;
}

.back {
  width: .68rem; height: .68rem; border-radius: 50%; background: var(--card);
  border: .03rem solid var(--line); box-shadow: 0 .05rem 0 var(--hard);
  display: flex; align-items: center; justify-content: center;
}
.back svg { width: .28rem; height: .28rem; }
.page-title { font-size: .42rem; font-weight: 800; letter-spacing: .01rem; }
.topbar { display: flex; align-items: center; gap: .18rem; padding: .18rem .32rem .1rem; }

/* ---------- 主卡 ---------- */
.hero {
  margin: 0 .28rem .28rem; border-radius: .44rem; padding: .3rem .32rem .26rem;
  background: linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border: .03rem solid var(--line);
  box-shadow: 0 .1rem 0 var(--hard);
  position: relative;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.label { font-size: .21rem; letter-spacing: .04rem; color: var(--text2); font-weight: 700; }
.pill {
  font-size: .2rem; padding: .07rem .18rem; border-radius: 999px;
  background: var(--butter); color: #4A3208; font-weight: 800;
  border: .02rem solid rgba(0,0,0,.07);
}
.hero-main { display: flex; align-items: center; gap: .26rem; margin-top: .16rem; }

.bowl { width: 2.06rem; height: 1.55rem; position: relative; flex: 0 0 auto; }
.bowl-shell {
  position: absolute; left: .02rem; bottom: .1rem; width: 2.02rem; height: 1.18rem;
  overflow: hidden; border-radius: .12rem .12rem 1.04rem 1.04rem / .12rem .12rem .96rem .96rem;
  background: var(--bowl); border: .03rem solid var(--bowl-line);
  box-shadow: inset 0 .14rem .2rem -.16rem rgba(0,0,0,.18);
}
.bowl-fill {
  position: absolute; left: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, #FFFDF6 0%, #FFEDC8 55%, #F2D79C 100%);
  transition: height .45s cubic-bezier(.2,.8,.2,1);
}
.bowl-fill::before {
  content: ""; position: absolute; left: -6%; right: -6%; top: -.13rem; height: .26rem;
  border-radius: 50%; background: #FFFDF6;
}
.bowl-rim {
  position: absolute; left: 0; top: .12rem; width: 2.06rem; height: .34rem;
  border-radius: 50%; border: .03rem solid var(--bowl-line);
}
.hero-num { font-size: .9rem; font-weight: 800; line-height: .95; letter-spacing: -.02rem; }
.hero-num span { font-size: .36rem; font-weight: 700; color: var(--text2); letter-spacing: 0; }
.hero-cap { font-size: .24rem; color: var(--text2); margin-top: .1rem; font-weight: 600; }
.hero-cap2 { font-size: .2rem; color: var(--text3); margin-top: .06rem; font-weight: 600; }
.streaks { display: flex; gap: .1rem; margin-top: .18rem; flex-wrap: wrap; }
.streak {
  display: flex; align-items: center; gap: .08rem; padding: .1rem .18rem; border-radius: .14rem;
  background: var(--card); border: .02rem solid var(--line); font-size: .21rem;
  color: var(--text2); font-weight: 600;
}
.streak b { color: var(--pink-deep); font-weight: 800; }
.hero-pig { position: absolute; right: .02rem; bottom: 0; width: 1.9rem; transform: rotate(4deg); }

/* ---------- 列表 ---------- */
.sec { display: flex; align-items: center; justify-content: space-between; padding: .1rem .38rem .14rem; }
.sec-title { font-size: .26rem; font-weight: 800; letter-spacing: .02rem; }
.sec-count { font-size: .21rem; color: var(--text3); font-weight: 600; }
.list { padding: 0 .28rem; }

.row {
  display: flex; align-items: center; gap: .2rem; padding: .22rem; margin-bottom: .18rem;
  border-radius: .32rem; background: var(--card); border: .03rem solid var(--line);
  box-shadow: 0 .07rem 0 var(--hard);
  transition: transform .12s ease;
}
.row:active { transform: scale(.985); }
.ico {
  width: .84rem; height: .84rem; border-radius: .26rem; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: .4rem;
  background: var(--card2); border: .02rem solid var(--line2);
}
.row-body { flex: 1; min-width: 0; }
.row-name { font-size: .3rem; font-weight: 800; letter-spacing: .004rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; align-items: center; gap: .1rem; margin-top: .07rem; font-size: .21rem; color: var(--text3); font-weight: 600; flex-wrap: wrap; }
.dot { width: .05rem; height: .05rem; border-radius: 50%; background: var(--text3); }
.tag { font-size: .18rem; padding: .02rem .1rem; border-radius: .08rem; font-weight: 800; }
.tag.sport { background: #FFE4D8; color: #C4562A; }
.tag.food  { background: #FFE1EB; color: #BE3468; }
.tag.study { background: #E2EDFF; color: #2E63B0; }
.tag.work  { background: #EDE6FF; color: #6444A8; }

.check {
  width: .74rem; height: .74rem; border-radius: 50%; flex: 0 0 auto;
  border: .03rem solid var(--pink); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.check svg { width: .34rem; height: .34rem; opacity: 0; }
.row.done { background: var(--card2); }
.row.done .check { background: var(--pink-fill); border-color: var(--pink-fill); box-shadow: 0 .04rem 0 var(--pink-shadow); }
.row.done .check svg { opacity: 1; }
.row.done .row-name { color: var(--text2); }
.check.pop { transform: scale(1.18); }

.ghost {
  height: .98rem; border-radius: .32rem; border: .03rem dashed var(--line);
  display: flex; align-items: center; justify-content: center; gap: .12rem;
  color: var(--text3); font-size: .26rem; font-weight: 700; margin-bottom: .2rem;
  background: transparent; width: 100%;
}
.ghost b { font-size: .34rem; font-weight: 400; line-height: 1; }

/* ---------- 底部 tab ---------- */
#tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(1.5rem + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--tab); border-top: .03rem solid var(--line);
  backdrop-filter: blur(12px);
}
#tabbar.hide { display: none; }
.tab { display: flex; flex-direction: column; align-items: center; gap: .06rem; font-size: .19rem; color: var(--text3); font-weight: 700; background: none; border: 0; padding: .08rem .3rem; }
.tab svg { width: .44rem; height: .44rem; }
.tab.on { color: var(--pink-deep); }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: .8rem .4rem; }
.empty img { width: 2.2rem; opacity: .9; margin-bottom: .2rem; }
.empty p { color: var(--text3); font-size: .24rem; margin: .1rem 0 .3rem; }
.empty .btn { display: inline-flex; }

/* ---------- 按钮 ---------- */
.btn {
  height: .96rem; padding: 0 .48rem; border-radius: 999px; border: 0;
  background: var(--pink); color: #fff; font-size: .3rem; font-weight: 800;
  box-shadow: 0 .07rem 0 var(--pink-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
}
.btn:active { transform: translateY(.03rem); box-shadow: 0 .04rem 0 var(--pink-deep); }
.btn.ghost-btn { background: var(--card); color: var(--text2); box-shadow: 0 .06rem 0 var(--hard); border: .03rem solid var(--line); }
.btn.wide { width: 100%; }

/* ---------- 表单 ---------- */
.field-label { font-size: .23rem; color: var(--text2); font-weight: 800; letter-spacing: .02rem; margin: .28rem .06rem .14rem; }
.input-box {
  background: var(--card); border: .03rem solid var(--line); border-radius: .32rem;
  padding: .26rem .28rem; box-shadow: 0 .08rem 0 var(--hard);
}
.input-box input {
  width: 100%; height: .52rem; border: 0; outline: 0; background: transparent; color: var(--text);
  font-size: .34rem; font-weight: 800; font-family: inherit;
}
.input-box input::placeholder { color: var(--text3); }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: .18rem; }
.cat {
  background: var(--card); border: .03rem solid var(--line); border-radius: .3rem;
  padding: .22rem; display: flex; align-items: center; gap: .14rem;
  box-shadow: 0 .06rem 0 var(--hard); position: relative; text-align: left;
}
.cat .emo { width: .68rem; height: .68rem; border-radius: .22rem; display: flex; align-items: center; justify-content: center; font-size: .34rem; }
.cat .t { font-size: .27rem; font-weight: 800; color: var(--text); }
.cat .s { font-size: .18rem; color: var(--text3); margin-top: .05rem; }
.cat.on { border-color: var(--pink); box-shadow: 0 .06rem 0 var(--pink-deep); }
.cat .tick { position: absolute; right: .16rem; top: .16rem; width: .32rem; height: .32rem; border-radius: 50%; background: var(--pink); display: none; align-items: center; justify-content: center; }
.cat.on .tick { display: flex; }
.cat .tick svg { width: .2rem; height: .2rem; }

.seg { display: flex; gap: .1rem; }
.seg button {
  flex: 1; padding: .2rem 0; border-radius: .24rem; background: var(--card);
  border: .03rem solid var(--line); font-size: .24rem; font-weight: 700; color: var(--text2);
  box-shadow: 0 .06rem 0 var(--hard); font-family: inherit;
}
.seg button.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 .06rem 0 var(--pink-deep); }

.week { display: flex; gap: .1rem; margin-top: .16rem; }
.wd {
  flex: 1; height: .8rem; border-radius: .22rem; background: var(--card);
  border: .03rem solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: .23rem; font-weight: 700; color: var(--text3); box-shadow: 0 .05rem 0 var(--hard);
}
.wd.on { background: var(--card2); border-color: var(--pink); color: var(--pink-deep); }

.hint { font-size: .2rem; color: var(--text3); line-height: 1.6; margin: .14rem .08rem 0; }

.panel { background: var(--card); border: .03rem solid var(--line); border-radius: .32rem; box-shadow: 0 .08rem 0 var(--hard); margin: 0 .28rem; overflow: hidden; }
.line { display: flex; align-items: center; gap: .16rem; padding: .26rem .26rem; }
.line + .line { border-top: .02rem solid var(--line2); }
.line .k { font-size: .26rem; font-weight: 700; }
.line .v { margin-left: auto; font-size: .25rem; color: var(--text3); font-weight: 700; display: flex; align-items: center; gap: .08rem; }
.line input[type=time] { border: 0; background: transparent; color: var(--pink-deep); font-size: .3rem; font-weight: 800; font-family: inherit; text-align: right; }

/* ---------- 日历 ---------- */
.cal { margin: .1rem .26rem 0; padding: .26rem .18rem .22rem; border-radius: .36rem; background: var(--card); border: .03rem solid var(--line); box-shadow: 0 .08rem 0 var(--hard); }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .1rem .18rem; }
.cal-month { font-size: .3rem; font-weight: 800; }
.cal-nav { display: flex; gap: .16rem; }
.cal-nav button { width: .62rem; height: .62rem; border-radius: 50%; background: var(--card2); border: .02rem solid var(--line); display: flex; align-items: center; justify-content: center; }
.cal-nav svg { width: .24rem; height: .24rem; }
.week-head, .grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.week-head div { text-align: center; font-size: .2rem; color: var(--text3); padding-bottom: .1rem; font-weight: 700; }
.grid { gap: .07rem; }
.cell { height: .98rem; border-radius: .18rem; display: flex; align-items: flex-start; justify-content: center; padding-top: .08rem; font-size: .2rem; color: var(--text2); position: relative; }
.cell.empty { background: transparent; }
.cell.l0 { background: var(--cell0); }
.cell.l1 { background: var(--cell1); }
.cell.l2 { background: var(--cell2); }
.cell.l3 { background: var(--cell3); }
.cell.l4 { background: linear-gradient(160deg, #FFE9B8, #FFCF6B); color: #3A2A08; font-weight: 800; }
.cell.today { box-shadow: inset 0 0 0 .02rem var(--pink); color: var(--text); }
.cell.future { opacity: .35; }

.sum3 { display: flex; gap: .16rem; padding: .24rem .26rem 0; }
.sm { flex: 1; padding: .22rem; border-radius: .28rem; background: var(--card); border: .03rem solid var(--line); }
.sm .k { font-size: .2rem; color: var(--text3); font-weight: 700; }
.sm .v { font-size: .42rem; font-weight: 800; margin-top: .08rem; }
.sm .v small { font-size: .22rem; color: var(--text3); font-weight: 600; }

/* ---------- 猪圈 ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .12rem; padding: .06rem .24rem 0; }
.tile { padding: .18rem .14rem; border-radius: .26rem; background: var(--card); border: .03rem solid var(--line); }
.tile .k { font-size: .18rem; color: var(--text3); white-space: nowrap; font-weight: 700; }
.tile .v { font-size: .38rem; font-weight: 800; margin-top: .06rem; }
.tile .v small { font-size: .17rem; color: var(--text3); }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .16rem; padding: .06rem .24rem; }
.mini {
  position: relative; border-radius: .26rem; overflow: hidden; background: var(--card);
  border: .03rem solid var(--line); box-shadow: 0 .06rem 0 var(--hard);
}
.mini .art { height: 1.46rem; display: flex; align-items: center; justify-content: center; background: #fff; }
.mini .art img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.mini .nm { font-size: .2rem; font-weight: 800; text-align: center; padding: .08rem .04rem .12rem; line-height: 1.15; background: var(--card2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .cnt { position: absolute; right: .08rem; top: .08rem; background: rgba(30,20,16,.85); color: #fff; font-size: .16rem; font-weight: 800; padding: .02rem .1rem; border-radius: 999px; }
.mini.locked { opacity: .82; }
.mini.locked .art { background: #F7EFE9; }
.mini.locked .lock { width: .56rem; height: .56rem; border-radius: 50%; background: #EFE0D5; display: flex; align-items: center; justify-content: center; }
.mini.locked .lock svg { width: .28rem; height: .28rem; opacity: .5; }
.mini.locked .nm { color: #C9B4A7; }

.rarity-bar { height: .06rem; }
.r-common { background: #F1D9CA; }
.r-rare { background: #9FD8EF; }
.r-epic { background: #C9A9F0; }
.r-legend { background: #FFC85C; }

/* 大卡 */
.bigcard { width: 6.6rem; border-radius: .4rem; overflow: hidden; background: #fff; position: relative; border: .05rem solid var(--rl); box-shadow: 0 .16rem 0 var(--rs); }
.bigcard .art { height: 3.5rem; display: flex; align-items: center; justify-content: center; background: #fff; position: relative; }
.bigcard .art img { width: 2.6rem; height: 2.6rem; object-fit: contain; border-radius: .2rem; position: relative; z-index: 2; }
.bigcard .body { padding: .06rem .38rem .36rem; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--bt) 60%); }
.bigcard .name { font-size: .46rem; font-weight: 800; }
.bigcard .sub { font-size: .22rem; color: var(--text3); margin-top: .08rem; font-weight: 700; }
.bigcard .desc { font-size: .24rem; line-height: 1.72; color: var(--text2); margin-top: .18rem; text-align: left; }
.bigcard .ribbon { position: absolute; left: 0; top: 0; padding: .08rem .2rem; border-radius: 0 0 .2rem 0; font-size: .19rem; font-weight: 800; }

/* ---------- 弹层 ---------- */
.mask {
  position: absolute; inset: 0; background: rgba(40, 26, 22, .55); z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: .3rem;
  animation: fade .18s ease;
}
.mask.bottom { align-items: flex-end; padding: 0; }
.sheet {
  width: 100%; max-height: 80%; overflow-y: auto; background: var(--bg);
  border-radius: .4rem .4rem 0 0; padding: .3rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  animation: up .22s cubic-bezier(.2,.9,.2,1);
}
@keyframes up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-title { font-size: .32rem; font-weight: 800; margin-bottom: .2rem; }
.sheet-close { position: absolute; right: .4rem; font-size: .3rem; color: var(--text3); }

.toast {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  background: rgba(40,26,22,.92); color: #fff; padding: .16rem .28rem; border-radius: 999px;
  font-size: .22rem; z-index: 60; animation: fade .2s ease; white-space: nowrap;
}

/* ---------- 设置 ---------- */
.switches { display: flex; gap: .1rem; padding: .1rem 0 .06rem; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: .14rem; padding: .12rem 0 .1rem; }
.sw { height: .8rem; border-radius: .22rem; border: .02rem solid var(--line); position: relative; }
.sw.on::after { content: ""; position: absolute; inset: -.06rem; border-radius: .26rem; border: .04rem solid var(--pink); }

.doc { padding: .1rem .32rem .4rem; font-size: .22rem; line-height: 1.8; color: var(--text2); }
.doc h3 { font-size: .26rem; color: var(--text); margin: .3rem 0 .1rem; }
.doc p { margin: 0 0 .12rem; }
.doc b { color: var(--text); }

/* ---------- 玻璃 / 气泡 ---------- */
.row {
  position: relative;
  border-radius: .4rem;
  background:
    radial-gradient(130% 90% at 10% 0%, var(--cat, rgba(255,255,255,.9)) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(158deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.52) 52%, rgba(255,255,255,.7) 100%);
  border: .02rem solid rgba(255,255,255,.9);
  box-shadow:
    0 .14rem .34rem -.16rem rgba(150,90,70,.30),
    inset 0 .02rem 0 rgba(255,255,255,.98),
    inset 0 -.02rem 0 rgba(255,255,255,.45);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  overflow: hidden;
}
.row::after {
  content: "";
  position: absolute; left: .04rem; right: .04rem; top: .02rem; height: 42%;
  border-radius: .36rem .36rem 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events: none;
}
.row.done {
  background:
    radial-gradient(130% 90% at 10% 0%, var(--cat, rgba(255,255,255,.7)) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(158deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.36) 60%, rgba(255,255,255,.5) 100%);
  box-shadow:
    0 .1rem .26rem -.16rem rgba(150,90,70,.22),
    inset 0 .02rem 0 rgba(255,255,255,.9);
}
.row > * { position: relative; z-index: 1; }

#phone[data-dark="1"] .row {
  background:
    radial-gradient(130% 90% at 10% 0%, var(--cat, rgba(255,255,255,.1)) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.07) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 .14rem .34rem -.18rem rgba(0,0,0,.6), inset 0 .02rem 0 rgba(255,255,255,.16);
}
#phone[data-dark="1"] .row.done {
  background:
    radial-gradient(130% 90% at 10% 0%, var(--cat, rgba(255,255,255,.08)) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(158deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.05) 100%);
}
#phone[data-dark="1"] .row::after { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }

/* 预设选项 */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; }
.preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: .06rem;
  padding: .22rem .22rem .2rem; border-radius: .3rem; font-family: inherit; text-align: left;
  background: linear-gradient(158deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border: .02rem solid rgba(255,255,255,.9);
  box-shadow: 0 .1rem .24rem -.14rem rgba(150,90,70,.28), inset 0 .02rem 0 rgba(255,255,255,.95);
}
.preset .pe { font-size: .38rem; line-height: 1; }
.preset .pn { font-size: .24rem; font-weight: 800; color: var(--text); }
.preset .pc { font-size: .17rem; color: var(--text3); font-weight: 700; }
.preset.has { opacity: .45; }
#phone[data-dark="1"] .preset {
  background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 .02rem 0 rgba(255,255,255,.16);
}

/* 操作面板 */
.action-list { display: flex; flex-direction: column; gap: .14rem; }
.action {
  display: flex; align-items: center; gap: .16rem; width: 100%;
  padding: .26rem .26rem; border-radius: .3rem; font-family: inherit;
  font-size: .27rem; font-weight: 800; color: var(--text); text-align: left;
  background: rgba(255,255,255,.85); border: .02rem solid rgba(255,255,255,.9);
  box-shadow: 0 .08rem .2rem -.14rem rgba(150,90,70,.3), inset 0 .02rem 0 rgba(255,255,255,.95);
}
.action.danger { color: #C93A3A; }
.action span { font-size: .3rem; }
#phone[data-dark="1"] .action {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--text);
}

/* 玻璃气泡 v2：更透、更亮的高光、更圆 */
.row {
  border-radius: .46rem;
  background:
    radial-gradient(120% 110% at 6% -10%, var(--cat, rgba(255,255,255,.9)) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.50) 100%);
  border: .02rem solid rgba(255,255,255,.95);
  box-shadow:
    0 .18rem .44rem -.2rem rgba(160,100,80,.36),
    0 .04rem .1rem -.05rem rgba(160,100,80,.12),
    inset 0 .03rem .02rem -.02rem rgba(255,255,255,1),
    inset 0 -.05rem .08rem -.04rem rgba(255,255,255,.55);
  transition: transform .14s ease, box-shadow .14s ease;
}
.row:active { transform: scale(.975); box-shadow: 0 .06rem .2rem -.12rem rgba(160,100,80,.3), inset 0 .03rem .02rem -.02rem rgba(255,255,255,1); }
.row.done {
  background:
    radial-gradient(120% 110% at 6% -10%, var(--cat, rgba(255,255,255,.7)) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.38) 100%);
}
#phone[data-dark="1"] .row {
  background:
    radial-gradient(120% 110% at 6% -10%, var(--cat, rgba(255,255,255,.12)) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%);
  border-color: rgba(255,255,255,.16);
}

/* ---------- 左滑删除 ---------- */
.swipe {
  position: relative;
  margin-bottom: .18rem;
  border-radius: .46rem;
  overflow: hidden;
}
.swipe .row { margin-bottom: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.swipe.dragging .row { transition: none; }
.swipe-del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 1.26rem;
  border: 0; padding: 0; font-family: inherit; font-size: .24rem; font-weight: 800;
  color: #fff; letter-spacing: .02rem;
  background: linear-gradient(135deg, #FF7A7A 0%, #E13B3B 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.96); transition: opacity .16s ease, transform .16s ease;
}
.swipe.open .swipe-del, .swipe.dragging .swipe-del { opacity: 1; transform: none; }
.swipe.open { box-shadow: 0 .12rem .3rem -.16rem rgba(180,40,40,.45); }
#phone[data-dark="1"] .swipe-del { background: linear-gradient(135deg, #C0392B 0%, #7E1B1B 100%); }

.swipe, .swipe .row { touch-action: pan-y; }

/* ---------- 欢迎页 / 用户 ---------- */
.welcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 82vh; padding: 0 .52rem; text-align: center; gap: .1rem;
}
.welcome img { width: 2.6rem; transform: rotate(-5deg); margin-bottom: .1rem; filter: drop-shadow(0 .2rem .3rem rgba(160,100,80,.25)); }
.welcome h1 { font-size: .62rem; margin: .1rem 0 0; letter-spacing: .04rem; }
.welcome p { font-size: .24rem; color: var(--text2); margin: .06rem 0 .3rem; font-weight: 600; }
.welcome .input-box { width: 100%; }
.welcome .btn { width: 100%; }
.welcome .hint { margin-top: .24rem; }

.mini-del {
  margin-left: auto; border: 0; background: transparent; color: #C93A3A;
  font-family: inherit; font-size: .21rem; font-weight: 800; padding: .1rem .06rem;
}

.input-box input { height: .56rem; line-height: .56rem; }


/* ---------- 值班猪 ---------- */
.hero-pig-wrap {
  position: absolute; right: .04rem; bottom: .02rem; width: 1.9rem;
  display: flex; flex-direction: column; align-items: center; gap: .04rem;
  cursor: pointer;
}
.hero-pig {
  position: static; width: 100%; height: auto; transform: rotate(4deg);
  filter: drop-shadow(0 .08rem .12rem rgba(150,90,70,.18));
  animation: bob 3.6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-.03rem); } }
.hero-pig-tag {
  font-size: .16rem; font-weight: 800; color: var(--text2);
  background: rgba(255,255,255,.72); border-radius: 999px; padding: .03rem .12rem;
  border: .015rem solid rgba(255,255,255,.9); white-space: nowrap;
}
#phone[data-dark="1"] .hero-pig-tag { background: rgba(255,255,255,.12); color: var(--text2); border-color: rgba(255,255,255,.14); }

/* 关于页小猪 */
.about-pigs { display: flex; justify-content: center; gap: .22rem; padding: .1rem 0 .2rem; }
.about-pigs img { width: 1.1rem; height: 1.1rem; object-fit: contain; opacity: .95; }
.about-pigs img:nth-child(1) { transform: rotate(-8deg); }
.about-pigs img:nth-child(3) { transform: rotate(8deg); }

.hero-pig { width: auto; max-width: 1.8rem; max-height: 1.46rem; object-fit: contain; }
.hero-pig-wrap { width: auto; max-width: 1.9rem; }