/* 後台「限制名單」(public/member-restrict-ui.js):會員詳情裡的一塊、名單旁的灰字、即將到期提示、設定頁表單。
 * 商米舊 WebView 守則:不用 flex gap / inset / :has / :is / clamp() / min() / max() / grid。顏色一律中性,不用紅色與驚嘆號
 * (店內平板常朝向櫃檯,名單旁的標示要低調)。 */
.mru { margin: 10px 0 0; border: 1px solid var(--line, #e3e6ee); border-radius: 12px; background: var(--card, #fff); }
.mru-d > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; }
.mru-d > summary::-webkit-details-marker { display: none; }
.mru-t { font-weight: 700; margin-right: 10px; }
.mru-s { font-size: 13px; color: #8b93a7; }
.mru-s-on { color: #5b6477; }
.mru-body { padding: 0 14px 14px; }
.mru-hint { font-size: 13px; line-height: 1.7; color: #6b7388; margin: 6px 0; }
.mru-warnbox { padding: 8px 10px; background: #f4f5f8; border-radius: 8px; }
.mru-warn { display: block; margin-top: 2px; color: #8a6a00; background: #fff6d6; border-radius: 6px; padding: 4px 8px; }
.mru-ft { font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.mru-e { border: 1px solid var(--line, #e3e6ee); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #fafbfd; }
.mru-e1 { display: flex; align-items: center; flex-wrap: wrap; }
.mru-e1 b { margin-right: 8px; }
.mru-e2 { font-size: 13px; line-height: 1.7; color: #5b6477; }
.mru-chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: #eceff5; color: #5b6477; margin-right: 6px; }
.mru-on { background: #e8f0ea; color: #3d6a4b; }
.mru-soon { background: #fff6d6; color: #8a6a00; }
.mru-off { background: #eceff5; color: #8b93a7; }
.mru-acts { display: flex; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mru-acts > * { margin: 0 8px 6px 0; }
.mru-btn { min-height: 44px; padding: 0 14px; }
.mru-sel, .mru-in { min-height: 44px; font-size: 14px; padding: 0 8px; border: 1px solid var(--line, #cfd4e0); border-radius: 8px; background: #fff; max-width: 100%; box-sizing: border-box; }
.mru-ta { width: 100%; box-sizing: border-box; font-size: 14px; padding: 8px; border: 1px solid var(--line, #cfd4e0); border-radius: 8px; }
.mru-fl { display: flex; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 14px; }
.mru-fl > span { width: 84px; flex: 0 0 auto; color: #5b6477; }
.mru-fl .mru-in, .mru-fl .mru-sel { flex: 1 1 200px; min-width: 0; }
.mru-chk > span { width: auto; flex: 1 1 auto; margin-left: 6px; color: inherit; }
.mru-chk input { width: 20px; height: 20px; }
.mru-chk2 { margin-left: 8px; font-size: 13px; white-space: nowrap; }
.mru-lv { display: flex; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.mru-lv > * { margin: 0 8px 6px 0; }
.mru-hist { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; line-height: 1.8; color: #5b6477; }
.mru-hist li { padding: 2px 0; border-bottom: 1px solid #f0f2f6; }
.mru-ht { display: inline-block; min-width: 82px; color: #8b93a7; }
.mru-pn { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #e3e6ee); }
.mru-pn[hidden], .mru-fl[hidden] { display: none; }
.mru-flag { display: inline-block; margin-left: 6px; font-size: 12px; color: #8b93a7; font-weight: 400; }
.mru-banner { display: flex; align-items: center; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 8px; border-radius: 10px; background: #f4f5f8; color: #5b6477; font-size: 14px; }
.mru-soonbar { background: #fff6d6; color: #6b5300; }
.mru-banner > * { margin-right: 8px; }