/* =========================================================
   余子食堂 · WeUI 设计系统 (精简干净版)
   配色采用微信绿 #07c160，hairline 边框，灰底白卡。
   ========================================================= */
:root{
  --yz-primary:#07c160;
  --yz-primary-active:#06ae56;
  --yz-bg:#ededed;
  --yz-bg-weak:#f7f7f7;
  --yz-card:#ffffff;
  --yz-text:#1a1a1a;
  --yz-text-2:#888888;
  --yz-text-3:#b2b2b2;
  --yz-line:rgba(0,0,0,.1);          /* 边框/分隔线 */
  --yz-line-soft:rgba(0,0,0,.04);
  --yz-warn:#fa5151;
  --yz-warn-active:#e04343;
  --yz-orange:#ff976a;
  --yz-blue:#10aeff;
  --yz-orange-bg:#fff7e6;
  --yz-blue-bg:#e7f6ff;
  --yz-green-bg:#e8f9ef;
  --yz-radius:8px;
  --yz-gap:12px;
  --yz-nav-h:48px;
  --yz-safe-b:env(safe-area-inset-bottom,0);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--yz-bg);
  color:var(--yz-text);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--yz-primary);text-decoration:none}
img{vertical-align:middle}
button{font-family:inherit}

/* ---------- 页面容器 ---------- */
.yz-page{position:relative;min-height:100vh;padding-bottom:calc(20px + var(--yz-safe-b))}
.yz-page--nav{padding-top:var(--yz-nav-h)}

/* ---------- 顶部导航栏 ---------- */
.yz-nav{
  position:sticky;top:0;z-index:30;
  height:var(--yz-nav-h);
  display:flex;align-items:center;
  padding:0 10px;
  background:var(--yz-primary);
  color:#fff;
  font-size:17px;font-weight:600;
}
.yz-nav .yz-nav__back{
  font-size:24px;line-height:1;width:32px;text-align:left;cursor:pointer;flex:0 0 auto;
}
.yz-nav .yz-nav__title{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.yz-nav .yz-nav__action{
  flex:0 0 auto;font-size:15px;font-weight:500;cursor:pointer;padding:0 6px;opacity:.95;
}
.yz-nav .yz-nav__action:active{opacity:.6}

/* ---------- 列表 cells ---------- */
.yz-cells{
  position:relative;background:var(--yz-card);margin:var(--yz-gap) 0;
  font-size:15px;
}
.yz-cells::before,.yz-cells::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--yz-line);
  transform:scaleY(.5);transform-origin:0 0;
}
.yz-cells::before{top:0}
.yz-cells::after{bottom:0}
.yz-cells__title{
  padding:16px 16px 6px;font-size:13px;color:var(--yz-text-2);
}
.yz-cell{
  position:relative;display:flex;align-items:center;
  padding:14px 16px;background:var(--yz-card);
}
.yz-cell::after{
  content:"";position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--yz-line);
  transform:scaleY(.5);transform-origin:0 0;
}
.yz-cell:last-child::after{display:none}
.yz-cell__bd{flex:1;min-width:0}
.yz-cell__ft{margin-left:10px;color:var(--yz-text-2);font-size:14px;text-align:right;flex:0 0 auto;max-width:60%}
.yz-cell--access{padding-right:32px}
.yz-cell--access::before{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;
  border-right:2px solid #c8c8cd;border-top:2px solid #c8c8cd;
  transform:translateY(-50%) rotate(45deg);
}
.yz-cell .label{font-weight:500;color:var(--yz-text)}

/* ---------- 表单 ---------- */
.yz-form{background:var(--yz-card);margin:var(--yz-gap) 0}
.yz-form .yz-cell{flex-direction:column;align-items:stretch}
.yz-form .yz-form__label{font-size:14px;color:var(--yz-text-2);margin-bottom:6px}
.yz-input,.yz-textarea,.yz-select{
  width:100%;border:none;outline:none;background:transparent;
  font-size:16px;color:var(--yz-text);padding:6px 0;font-family:inherit;
}
.yz-textarea{resize:vertical;min-height:48px;line-height:1.5}
.yz-select{appearance:none;-webkit-appearance:none;background:transparent}
.yz-input::placeholder,.yz-textarea::placeholder{color:var(--yz-text-3)}

/* 行内表单(标签+输入同一行) */
.yz-field{
  display:flex;align-items:center;background:var(--yz-card);
  margin:var(--yz-gap) 0;padding:0 16px;border-radius:var(--yz-radius);
}
.yz-field label{width:84px;flex:0 0 auto;color:var(--yz-text-2);font-size:14px}
.yz-field .yz-input{padding:13px 0}

/* ---------- 按钮 ---------- */
.yz-btn{
  display:block;width:100%;border:none;border-radius:4px;
  height:46px;line-height:46px;text-align:center;
  font-size:17px;font-weight:500;color:#fff;background:var(--yz-primary);cursor:pointer;
  transition:background .15s;
}
.yz-btn:active{background:var(--yz-primary-active)}
.yz-btn[disabled],.yz-btn.is-disabled{opacity:.55;pointer-events:none}
.yz-btn--default{background:#f2f2f2;color:var(--yz-text)}
.yz-btn--default:active{background:#e5e5e5}
.yz-btn--warn{background:var(--yz-warn)}
.yz-btn--warn:active{background:var(--yz-warn-active)}
.yz-btn--mini{
  display:inline-block;width:auto;height:34px;line-height:34px;
  padding:0 16px;font-size:14px;border-radius:4px;
}
.yz-btn--mini.yz-btn--default{background:#f2f2f2}
.yz-btn--ghost{background:#fff;color:var(--yz-primary);border:1px solid var(--yz-primary)}
.yz-btn--ghost:active{background:var(--yz-green-bg)}
.yz-btn-area{margin:var(--yz-gap) 16px}

/* ---------- 卡片 panel ---------- */
.yz-panel{
  background:var(--yz-card);border-radius:var(--yz-radius);
  margin:var(--yz-gap) 12px;padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.yz-panel__title{font-size:15px;font-weight:600;margin:0 0 10px}
.yz-media{display:flex;align-items:center;gap:12px}
.yz-media__hd{flex:0 0 auto}
.yz-media__bd{flex:1;min-width:0}
.yz-media__ft{flex:0 0 auto;color:var(--yz-text-2)}

/* ---------- 徽标 / 标签 ---------- */
.yz-badge{
  display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;line-height:18px;
  background:#f2f2f2;color:var(--yz-text-2);vertical-align:middle;
}
.yz-badge--green{background:var(--yz-green-bg);color:var(--yz-primary)}
.yz-badge--blue{background:var(--yz-blue-bg);color:var(--yz-blue)}
.yz-badge--orange{background:var(--yz-orange-bg);color:#ff8f1f}
.yz-badge--warn{background:#ffecec;color:var(--yz-warn)}
.yz-badge--done{background:var(--yz-green-bg);color:var(--yz-primary)}
.yz-tag{
  display:inline-block;padding:2px 9px;border-radius:4px;font-size:12px;
  background:var(--yz-green-bg);color:var(--yz-primary);
}

/* ---------- 金额 ---------- */
.yz-amount{color:var(--yz-warn);font-weight:700}
.yz-amount--normal{color:var(--yz-text);font-weight:600}

/* ---------- 空状态 ---------- */
.yz-empty{text-align:center;color:var(--yz-text-3);padding:50px 20px;font-size:14px}
.yz-empty .yz-empty__icon{font-size:40px;display:block;margin-bottom:8px;opacity:.6}

/* ---------- 结果页(msg) ---------- */
.yz-msg{padding:48px 24px;text-align:center}
.yz-msg__icon{font-size:56px;margin-bottom:12px}
.yz-msg__title{font-size:20px;font-weight:600;margin-bottom:8px}
.yz-msg__desc{color:var(--yz-text-2);font-size:14px;line-height:1.7}
.yz-msg .yz-btn-area{margin-top:28px}

/* ---------- 分段控件 ---------- */
.yz-seg{display:flex;background:#f2f2f2;border-radius:6px;padding:3px;gap:3px}
.yz-seg label{
  flex:1;text-align:center;padding:9px 4px;border-radius:5px;
  font-size:14px;color:var(--yz-text-2);cursor:pointer;transition:.15s;
}
.yz-seg input{position:absolute;opacity:0;pointer-events:none}
.yz-seg label.on{background:#fff;color:var(--yz-primary);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- 网格(后台导航) ---------- */
.yz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px}
.yz-grid__item{
  background:var(--yz-card);border-radius:var(--yz-radius);padding:18px 14px;
  text-decoration:none;color:var(--yz-text);display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.04);transition:.15s;
}
.yz-grid__item:active{transform:translateY(1px);background:#fafafa}
.yz-grid__item .t{font-size:16px;font-weight:600}
.yz-grid__item .d{font-size:12px;color:var(--yz-text-2);margin-top:5px;line-height:1.4}
.yz-grid__item .ic{font-size:22px;margin-bottom:8px;display:block}

/* ---------- 底部 tabbar ---------- */
.yz-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:calc(54px + var(--yz-safe-b));padding-bottom:var(--yz-safe-b);
  background:var(--yz-card);display:flex;align-items:center;
  border-top:1px solid var(--yz-line);
}
.yz-tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--yz-text-2);font-size:12px;gap:2px;text-decoration:none;
}
.yz-tabbar a.on{color:var(--yz-primary)}
.yz-tabbar a .ic{font-size:22px;line-height:1}

/* ---------- 浮层 modal / dialog ---------- */
.yz-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:60;padding:24px;
}
.yz-mask.show{display:flex}
.yz-dialog{
  background:#fff;border-radius:12px;width:300px;max-width:86vw;overflow:hidden;
}
.yz-dialog__hd{padding:24px 20px 8px;text-align:center;font-size:17px;font-weight:600}
.yz-dialog__bd{padding:0 20px 16px;text-align:center;color:var(--yz-text-2);font-size:15px}
.yz-dialog__ft{display:flex;border-top:1px solid var(--yz-line)}
.yz-dialog__ft button{
  flex:1;border:none;background:#fff;height:50px;font-size:16px;cursor:pointer;color:var(--yz-primary);
}
.yz-dialog__ft button:active{background:#f2f2f2}
.yz-dialog__ft button+button{border-left:1px solid var(--yz-line)}

/* ---------- Toast ---------- */
.yz-toast{
  position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.78);color:#fff;font-size:14px;
  padding:12px 18px;border-radius:8px;z-index:99;
  max-width:70vw;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none;
}
.yz-toast.show{opacity:1}
.yz-toast--ok{background:rgba(7,193,96,.92)}
.yz-toast--err{background:rgba(250,81,81,.92)}

/* ---------- 工具类 ---------- */
.yz-muted{color:var(--yz-text-2)}
.yz-muted-3{color:var(--yz-text-3)}
.yz-center{text-align:center}
.yz-mt8{margin-top:8px}.yz-mt12{margin-top:12px}.yz-mt16{margin-top:16px}
.yz-p12{padding:12px}.yz-p16{padding:16px}
.yz-flex{display:flex;align-items:center}.yz-between{justify-content:space-between}
.yz-nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yz-hidden{display:none!important}
.yz-thumb{width:54px;height:54px;border-radius:6px;object-fit:cover;background:#f0f0f0}