/* BOSBM Community Cloud — 共用樣式（BOSBM navy/gold 設計系統，手機優先） */
:root {
  --navy: #1B2A4A; --navy-deep: #162038; --gold: #C9A84C; --bg: #EEF1F5;
  --success: #0D7252; --error: #C53030; --escrow: #0E86B5; --muted: #8A94A6;
  --card: #fff; --radius: 14px; --shadow: 0 2px 12px rgba(27,42,74,.08);
}
* { box-sizing: border-box; margin: 0; }
body { font-family: 'PingFang TC', 'Noto Sans TC', -apple-system, sans-serif; background: var(--bg); color: var(--navy); min-height: 100vh; }
.topbar { background: var(--navy); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
.topbar .logo { font-weight: 800; letter-spacing: .5px; }
.topbar .logo b { color: var(--gold); }
.topbar .sp { flex: 1; }
.topbar .who { font-size: 13px; opacity: .85; }
.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; -webkit-overflow-scrolling: touch; }
.tabs button { flex-shrink: 0; border: 0; background: #fff; color: var(--navy); padding: 9px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.tabs button.on { background: var(--navy); color: #fff; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h3 { font-size: 15px; margin-bottom: 10px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; text-align: center; }
.stat .n { font-size: 26px; font-weight: 800; color: var(--navy); }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.btn { border: 0; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.btn.gold { background: var(--gold); color: var(--navy-deep); font-weight: 700; }
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid #d5dbe5; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn.danger { background: var(--error); }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #d5dbe5; border-radius: 10px; font-size: 15px; font-family: inherit; margin-bottom: 10px; background: #fff; }
textarea { min-height: 90px; }
label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; min-width: 120px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #e2f2ec; color: var(--success); }
.badge.warn { background: #fdeaea; color: var(--error); }
.badge.info { background: #e4f1f8; color: var(--escrow); }
.badge.gray { background: #eceff3; color: var(--muted); }
.badge.gold { background: #f6efdc; color: #8a6d1f; }
.list-item { padding: 12px 0; border-bottom: 1px solid #eef1f5; }
.list-item:last-child { border-bottom: 0; }
.list-item .t { font-weight: 600; font-size: 15px; }
.list-item .s { font-size: 13px; color: var(--muted); margin-top: 3px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 13px; }
.auth-box { max-width: 400px; margin: 8vh auto; }
.auth-box .brand { text-align: center; margin-bottom: 22px; }
.auth-box .brand .big { font-size: 26px; font-weight: 800; color: var(--navy); }
.auth-box .brand .big b { color: var(--gold); }
.qr-box { display: flex; justify-content: center; padding: 14px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.addon { border: 2px solid #d5dbe5; border-radius: 12px; padding: 12px; cursor: pointer; background: #fff; }
.addon.on { border-color: var(--gold); background: #fdf9ef; }
.addon .n { font-weight: 700; font-size: 14px; }
.addon .d { font-size: 12px; color: var(--muted); margin-top: 4px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--navy-deep); color: #fff; padding: 12px 22px; border-radius: 12px; font-size: 14px; z-index: 99; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.step-dots { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.step-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe5; }
.step-dots i.on { background: var(--gold); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
table.tbl td { padding: 8px; border-bottom: 1px solid #f4f6f9; }
.tbl-scroll { overflow-x: auto; }