:root { --modal-backdrop: rgba(0,0,0,.55); }

.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.nav { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding: 12px 0; }
.nav a { text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid #ddd; }
.nav a.active { background:#111; color:#fff; border-color:#111; }

table { width:100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #eee; padding: 10px 8px; text-align:left; vertical-align: top; }
th { background: #fafafa; position: sticky; top: 0; z-index: 1; }

button { cursor:pointer; }

.row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.muted { color: #666; font-size: 12px; }
.pill { display:inline-block; padding:2px 8px; border-radius: 999px; background:#f2f2f2; font-size: 12px; }
.pill.ok { background:#e8f5e9; }
.pill.warn { background:#fff3e0; }

.modal-backdrop { display:none; position: fixed; inset: 0; background: var(--modal-backdrop); z-index: 1000; }
.modal { display:none; position: fixed; inset: 0; z-index: 1001; overflow:auto; }
.modal .dialog { background:#fff; max-width: 720px; margin: 10vh auto; padding: 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.modal .dialog h3 { margin: 0 0 10px; }
.modal .dialog .content { white-space: pre-wrap; }
.modal .dialog .footer { margin-top: 14px; display:flex; gap:10px; justify-content:flex-end; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 22px; padding: 12px; border: 1px dashed #aaa; border-radius: 10px; letter-spacing: 1px; }

.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.input, select, textarea { box-sizing: border-box; width:100%; padding:10px 10px; border-radius:10px; border:1px solid #ddd; min-width: 0; }
textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.btn { border:1px solid #111; background:#111; color:#fff; padding: 10px 12px; border-radius:10px; }
.btn.secondary { background:#fff; color:#111; }
.btn.danger { background:#b00020; border-color:#b00020; }
.btn.small { padding:6px 10px; border-radius:10px; font-size: 12px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

.wechat-card { display:flex; gap:16px; align-items:flex-start; padding:14px; border:1px solid #ffe08a; background:#fffbec; border-radius:14px; }
.wechat-qr { flex:0 0 auto; }
.wechat-qr img { width:120px; height:120px; object-fit:contain; background:#fff; border:1px solid #eee; border-radius:12px; }
.wechat-id { font-size: 20px; font-weight: 700; margin-top: 4px; }
.wechat-notice { margin-top:10px; padding:10px 12px; border:1px dashed #b00020; border-radius:12px; background:#fff5f7; color:#b00020; font-weight:700; white-space: pre-line; line-height:1.55; }

@media (max-width: 720px) {
  .wechat-card { align-items:flex-start; flex-direction: column; }
  .wechat-qr img { width:120px; height:120px; }
}