/* 信義萬富宮 後台：淺色、字大、手機能用（清單十一：操作簡單、字體清楚、路徑最少） */
:root { --wfb-red: #8e1b1b; --wfb-red-d: #6c1212; --wfb-gold: #b8892b; --wfb-bg: #f4efe4; --wfb-card: #fff; --wfb-line: #e2d8c3;
        --wfb-ink: #2b2420; --wfb-dim: #7a6c5d; --wfb-green: #2f7d4f; --wfb-blue: #1d4e9e; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--wfb-bg); color: var(--wfb-ink); font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; font-size: 16px; line-height: 1.6; }
a { color: var(--wfb-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.wfb-app { display: flex; min-height: 100vh; }
.wfb-side { width: 218px; background: #2b1a14; color: #e9d9b8; padding: 16px 10px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.wfb-side .brand { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 19px; color: #f1d9a0; padding: 4px 10px 14px; letter-spacing: 1px; }
.wfb-side a { display: block; color: #e9d9b8; padding: 10px 12px; border-radius: 8px; font-size: 15.5px; }
.wfb-side a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.wfb-side a.active { background: var(--wfb-red); color: #fff; }
.wfb-side .sep { border-top: 1px solid rgba(255,255,255,.12); margin: 10px 0; }
.wfb-side .grp { font-size: 12px; color: #a88f66; padding: 8px 12px 2px; letter-spacing: 1px; }
.wfb-main { flex: 1; min-width: 0; }
.wfb-top { background: #fff; border-bottom: 1px solid var(--wfb-line); padding: 10px 20px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; }
.wfb-top h1 { font-size: 20px; margin: 0; flex: 1; font-family: "Noto Serif TC", serif; color: var(--wfb-red-d); }
.wfb-top .who { color: var(--wfb-dim); font-size: 14px; }
.wfb-burger { display: none; background: none; border: 1px solid var(--wfb-line); border-radius: 8px; font-size: 22px; padding: 2px 10px; cursor: pointer; }
.wfb-content { padding: 20px; max-width: 1240px; }
@media (max-width: 900px) {
  .wfb-side { position: fixed; left: -240px; z-index: 40; transition: left .2s; height: 100vh; }
  .wfb-side.open { left: 0; box-shadow: 0 0 30px rgba(0,0,0,.4); }
  .wfb-burger { display: block; }
  .wfb-content { padding: 14px; }
}
.wfb-card { background: var(--wfb-card); border: 1px solid var(--wfb-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.wfb-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--wfb-red-d); }
.wfb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 16px; }
.wfb-stat { background: #fff; border: 1px solid var(--wfb-line); border-radius: 12px; padding: 14px 16px; }
.wfb-stat .n { font-size: 28px; font-weight: 900; color: var(--wfb-red-d); line-height: 1.2; }
.wfb-stat .t { color: var(--wfb-dim); font-size: 14px; }
.wfb-stat.warn .n { color: #c0262d; }
.wfb-flash { background: #fff6dc; border: 1px solid #ecd48a; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--wfb-line); border-radius: 12px; margin-bottom: 16px; }
table.wfb-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.wfb-tbl th { background: #f3ecdb; text-align: left; padding: 9px 12px; font-size: 13.5px; color: #5f4f3a; white-space: nowrap; }
.wfb-tbl td { padding: 9px 12px; border-top: 1px solid #efe6d2; vertical-align: top; }
.wfb-tbl tr:hover td { background: #fffaf0; }
.wfb-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #eee; color: #555; white-space: nowrap; }
.wfb-tag.green { background: #d9efe1; color: var(--wfb-green); }
.wfb-tag.red { background: #f6d9d9; color: var(--wfb-red-d); }
.wfb-tag.gold { background: #f6e8c2; color: #7a5410; }
.wfb-tag.blue { background: #dbe4f7; color: var(--wfb-blue); }
.btn { display: inline-block; background: var(--wfb-red); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-size: 15px; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn:hover { background: var(--wfb-red-d); text-decoration: none; }
.btn.sm { padding: 4px 10px; font-size: 13.5px; }
.btn.alt { background: #fff; color: var(--wfb-ink); border: 1px solid #c9bb9c; }
.btn.alt:hover { background: #f7f0df; }
.btn.green { background: var(--wfb-green); }
.btn.danger { background: #fff; color: #b3261e; border: 1px solid #e0a6a2; }
.wfb-form label { display: block; font-weight: 700; margin: 10px 0 3px; font-size: 14.5px; }
.wfb-form input[type=text], .wfb-form input[type=tel], .wfb-form input[type=date], .wfb-form input[type=number], .wfb-form input[type=password],
.wfb-form select, .wfb-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #cdbd9a; border-radius: 8px; font-size: 15.5px; background: #fffdf8; font-family: inherit; }
.wfb-form textarea { min-height: 80px; }
.wfb-form .row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wfb-form .hint { color: var(--wfb-dim); font-size: 13px; }
.wfb-form .inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 14px; }
.wfb-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.wfb-filter input, .wfb-filter select { padding: 7px 10px; border: 1px solid #cdbd9a; border-radius: 8px; font-size: 15px; }
.mini-form { display: inline-flex; gap: 4px; align-items: center; margin: 2px 0; }
.mini-form select, .mini-form input[type=text] { padding: 3px 6px; font-size: 13.5px; border: 1px solid #cdbd9a; border-radius: 6px; }
.dim { color: var(--wfb-dim); }
.login-box { max-width: 380px; margin: 80px auto; }