/* ============================================================
   群管机器人 Mini App · 改版皮肤 (skin.css)
   叠加在原有 <style> 之后，仅重构视觉与主题，不改动任何
   后端逻辑 / DOM id / 类名。完整支持 Telegram 亮 / 暗主题。
   ============================================================ */

:root{
  --sk-bg:        var(--tg-theme-secondary-bg-color, #EFEFF4);
  --sk-card:      var(--tg-theme-bg-color, #FFFFFF);
  --sk-text:      var(--tg-theme-text-color, #000000);
  --sk-sub:       var(--tg-theme-hint-color, #8A8A8E);
  --sk-accent:    var(--tg-theme-button-color, #3390EC);
  --sk-on-accent: var(--tg-theme-button-text-color, #FFFFFF);
  --sk-link:      var(--tg-theme-link-color, var(--sk-accent));
  --sk-sep:       rgba(120,120,128,.22);
  --sk-field:     var(--tg-theme-secondary-bg-color, #EFEFF4);
  --sk-radius:    14px;
  --sk-ok-bg: rgba(52,199,89,.15);  --sk-ok-fg:#1E8A3B;
  --sk-wn-bg: rgba(255,149,0,.16);  --sk-wn-fg:#9A5B00;
  --sk-er-bg: rgba(255,59,48,.13);  --sk-er-fg:#C4342B;
  --sk-in-bg: rgba(51,144,236,.13); --sk-in-fg:#1F6FD6;
}
[data-theme="dark"]{
  /* 仍优先使用 Telegram 主题变量，仅把兜底值换成暗色 */
  --sk-bg:   var(--tg-theme-secondary-bg-color, #17212B);
  --sk-card: var(--tg-theme-bg-color, #232E3C);
  --sk-text: var(--tg-theme-text-color, #FFFFFF);
  --sk-sub:  var(--tg-theme-hint-color, #8996A3);
  --sk-sep: rgba(255,255,255,.10);
  --sk-field: rgba(255,255,255,.06);
  --sk-ok-bg: rgba(52,199,89,.18); --sk-ok-fg:#4FD877;
  --sk-wn-bg: rgba(255,149,0,.18); --sk-wn-fg:#FFB44D;
  --sk-er-bg: rgba(255,69,58,.20); --sk-er-fg:#FF6B61;
  --sk-in-bg: rgba(51,144,236,.20); --sk-in-fg:#6AB2F2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sk-bg:   var(--tg-theme-secondary-bg-color, #17212B);
    --sk-card: var(--tg-theme-bg-color, #232E3C);
    --sk-text: var(--tg-theme-text-color, #FFFFFF);
    --sk-sub:  var(--tg-theme-hint-color, #8996A3);
    --sk-sep: rgba(255,255,255,.10);
    --sk-field: rgba(255,255,255,.06);
    --sk-ok-fg:#4FD877; --sk-wn-fg:#FFB44D; --sk-er-fg:#FF6B61; --sk-in-fg:#6AB2F2;
  }
}

/* ---------- base surface ---------- */
body{ background:var(--sk-bg); color:var(--sk-text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Segoe UI',Roboto,sans-serif; }
.header{ background:var(--sk-card); border-bottom:.5px solid var(--sk-sep); backdrop-filter:saturate(180%) blur(20px);
  text-align:center; padding:9px 56px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.header h1{ font-size:17px; font-weight:600; letter-spacing:-.1px; }
.header p{ color:var(--sk-sub); font-size:12px; margin-top:1px; }
/* screen title lives in the header now — hide the in-content duplicates */
#statsGroupName, #settingsGroupName, #moduleTitle{ display:none !important; }
.main{ max-width:640px; padding:16px 16px 40px; margin-left:auto; margin-right:auto; }
/* responsive safety net: never let fields / media / grids exceed their container (down to 320px) */
input,select,textarea{ max-width:100%; box-sizing:border-box; }
img,video{ max-width:100%; height:auto; }
.form-input,.form-select,.form-textarea{ box-sizing:border-box; }

/* self-drawn back button — shown in browser/preview; hidden when real Telegram BackButton is active (see skin.js) */
.back-btn{ width:auto; height:34px; padding:0 8px 0 4px; border-radius:9px; background:transparent; color:var(--sk-accent);
  font-size:16px; font-weight:400; box-shadow:none; top:9px; left:8px; z-index:200;
  display:inline-flex; align-items:center; gap:1px; border:none; cursor:pointer; }
.back-btn:active{ background:var(--sk-sep); }

/* ---------- grouped list: kill card-in-card nesting ---------- */
.section{ background:transparent !important; box-shadow:none !important; border:none !important;
  padding:0 !important; border-radius:0 !important; margin-bottom:22px; }
.section-title{ font-size:15px; font-weight:700; letter-spacing:-.2px; color:var(--sk-text);
  margin:2px 4px 12px; gap:8px; }
.section h3, .settings-section h4{ font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; color:var(--sk-sub); margin:4px 4px 10px; }
.settings-section{ margin-bottom:22px; }

/* ---------- buttons ---------- */
.btn{ border-radius:12px; font-weight:600; min-height:46px; box-shadow:none; transition:opacity .2s, transform .1s; }
.btn:hover{ opacity:.9; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--sk-accent); color:var(--sk-on-accent); }
.btn-secondary{ background:var(--sk-card); color:var(--sk-accent); border:.5px solid var(--sk-sep); }
.btn-success{ background:var(--sk-ok-bg); color:var(--sk-ok-fg); }
.btn-warning{ background:var(--sk-wn-bg); color:var(--sk-wn-fg); }
.btn-danger{ background:var(--sk-er-bg); color:var(--sk-er-fg); }
.btn-small{ min-height:34px; padding:6px 14px; font-size:13px; border-radius:9px; border:none; }
.btn-edit{ background:var(--sk-in-bg); color:var(--sk-in-fg); }
.btn-preview{ background:var(--sk-field); color:var(--sk-text); }
.btn-delete{ background:var(--sk-er-bg); color:var(--sk-er-fg); }
.top-actions{ gap:10px; margin-bottom:22px; }

/* ---------- group list (home) ---------- */
.group-list{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; gap:0; }
.group-item{ background:transparent; border:none; border-radius:0; padding:14px 16px;
  border-bottom:.5px solid var(--sk-sep); }
.group-item:last-child{ border-bottom:none; }
.group-item:hover{ background:var(--sk-field); }
.group-item.fade-in{ animation:sk-fade .3s ease; }
.group-name{ font-size:16px; font-weight:600; }

/* ---------- settings menu (grouped rows) ---------- */
.settings-menu{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; gap:0; }
.settings-item{ background:transparent !important; border:none !important; border-radius:0 !important;
  padding:13px 16px !important; border-bottom:.5px solid var(--sk-sep);
  transform:none !important; box-shadow:none !important; overflow:visible; }
.settings-item:last-child{ border-bottom:none; }
.settings-item:hover{ background:var(--sk-field); }
.settings-item-title{ font-size:16px; font-weight:500; margin-bottom:2px; }
.settings-item-desc{ font-size:12.5px; color:var(--sk-sub); }

/* ---------- statistics ---------- */
.stats-grid{ gap:10px; margin-bottom:0; }
.stat-item{ background:var(--sk-card); border:none; border-radius:12px; padding:16px 12px; }
.stat-number{ font-size:24px; font-weight:700; letter-spacing:-.5px; }
.stat-number.success{ color:var(--sk-ok-fg); }
.stat-number.danger{ color:var(--sk-er-fg); }
.stat-number.primary{ color:var(--sk-accent); }
.stat-label{ font-size:12px; color:var(--sk-sub); }

/* ---------- iOS switches ---------- */
.switch{ width:51px; height:31px; }
.slider{ background:#C2C2C6; border-radius:31px; }
[data-theme="dark"] .slider{ background:rgba(255,255,255,.22); }
.slider:before{ height:27px; width:27px; left:2px; bottom:2px; box-shadow:0 1px 3px rgba(0,0,0,.28); }
input:checked+.slider{ background:var(--sk-accent); }
input:checked+.slider:before{ transform:translateX(20px); }
.toggle-switch{ width:51px; height:31px; }
.toggle-slider{ background:#C2C2C6; border-radius:31px; }
[data-theme="dark"] .toggle-slider{ background:rgba(255,255,255,.22); }
.toggle-slider:before{ height:27px; width:27px; left:2px; bottom:2px; box-shadow:0 1px 3px rgba(0,0,0,.28); }
input:checked+.toggle-slider{ background:var(--sk-accent); }
input:checked+.toggle-slider:before{ transform:translateX(20px); }

/* ---------- forms ---------- */
.form-control-group{ background:var(--sk-card); border-radius:var(--sk-radius); padding:4px 16px; margin-bottom:22px; }
.form-control-group .form-group{ margin-bottom:0; padding:14px 0; border-bottom:.5px solid var(--sk-sep); }
.form-control-group .form-group:last-child{ border-bottom:none; }
.form-row{ padding:14px 0; border-bottom:.5px solid var(--sk-sep); }
.form-label{ font-size:15px; font-weight:500; margin-bottom:8px; }
.form-input,.form-textarea,.form-select{ background:var(--sk-field); border:1.5px solid transparent;
  border-radius:11px; font-size:16px; padding:12px 14px; color:var(--sk-text); }
.form-input:focus,.form-textarea:focus,.form-select:focus{ border-color:var(--sk-accent); background:var(--sk-card); }
.form-help{ background:transparent; color:var(--sk-sub); font-size:12.5px; padding:6px 2px 0; }
.form-actions{ border-top:none; padding-top:8px; margin-top:20px; }
.form-actions .btn{ flex:1; }
/* grouped-card dividers: treat a row + its help text as one unit, kill trailing lines.
   Scoped to DIRECT children so nested help/inputs are untouched. */
.form-control-group > .form-row{ border-bottom:.5px solid var(--sk-sep); }
.form-control-group > .form-row:has(+ .form-help){ border-bottom:none; padding-bottom:6px; }
.form-control-group > .form-help{ padding:2px 2px 14px; border-bottom:.5px solid var(--sk-sep); }
.form-control-group > .form-row:last-child,
.form-control-group > .form-group:last-child,
.form-control-group > .form-help:last-child{ border-bottom:none; padding-bottom:2px; }

/* ---------- badges / status ---------- */
.badge,.status-badge{ border-radius:8px; font-weight:600; padding:3px 9px; font-size:11px; }
.badge-success,.status-badge.active{ background:var(--sk-ok-bg); color:var(--sk-ok-fg); }
.badge-warning{ background:var(--sk-wn-bg); color:var(--sk-wn-fg); }
.badge-secondary{ background:var(--sk-field); color:var(--sk-sub); }
.status-badge.inactive{ background:var(--sk-er-bg); color:var(--sk-er-fg); }
.error{ background:var(--sk-er-bg); color:var(--sk-er-fg); border-radius:10px; padding:12px; }
.success{ background:var(--sk-ok-bg); color:var(--sk-ok-fg); border-radius:10px; padding:12px; }
.empty,.empty-state,.loading,.error-state{ color:var(--sk-sub); }

/* ---------- list cards (templates / rules / scheduled / records) ---------- */
.template-category{ background:var(--sk-card); border:none; border-radius:var(--sk-radius); }
.category-header{ border-bottom:.5px solid var(--sk-sep); }
.category-header h3{ margin:0; font-size:15px; font-weight:700; text-transform:none; color:var(--sk-text); letter-spacing:-.2px; }
/* 分类头部「新建模版」：iOS 风格浅色胶囊按钮 */
.category-header .btn-primary{
  background:var(--sk-in-bg); color:var(--sk-in-fg);
  border:none; border-radius:16px; padding:8px 14px;
  font-size:13px; font-weight:600; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.category-header .btn-primary::before{ content:'＋'; font-weight:700; }
.category-header .btn-primary:active{ opacity:.6; }
.template-item,.rule-item,.scheduled-message-item{ background:var(--sk-card); border:.5px solid var(--sk-sep);
  border-radius:12px; box-shadow:none; }
.rule-item:hover,.scheduled-message-item:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:var(--sk-sep); }
.template-name,.rule-title h4,.message-title h4{ font-weight:600; }
.status-badge.active,.template-status .active{ background:var(--sk-ok-bg); color:var(--sk-ok-fg); }
.status-badge.inactive,.template-status .inactive{ background:var(--sk-er-bg); color:var(--sk-er-fg); }
.keywords-list{ background:var(--sk-field); border:none; border-radius:11px; }
.keyword-tag{ background:var(--sk-field); color:var(--sk-text); border:.5px solid var(--sk-sep); border-radius:8px; font-size:13px; }
.keyword-remove{ color:var(--sk-sub); }
.filter-controls{ background:transparent; padding:0; margin-bottom:16px; }

/* ---------- invite pseudo-tabs → segmented control ---------- */
.record-item{ background:var(--sk-card); border:.5px solid var(--sk-sep); border-radius:12px; margin-bottom:10px; padding:12px 14px; }
.leaderboard-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:.5px solid var(--sk-sep); }
.leaderboard-item .rank{ font-weight:700; color:var(--sk-accent); }
.pagination{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.pagination .btn-small{ min-width:34px; background:var(--sk-card); color:var(--sk-text); border:.5px solid var(--sk-sep); }
.pagination .btn-small.active{ background:var(--sk-accent); color:var(--sk-on-accent); border-color:var(--sk-accent); }

/* ---------- editor toolbar ---------- */
.editor-toolbar{ background:var(--sk-field); border-bottom:.5px solid var(--sk-sep); }
.toolbar-btn{ background:var(--sk-card); color:var(--sk-text); border:.5px solid var(--sk-sep); border-radius:8px; min-width:34px; height:34px; }
.toolbar-btn:hover{ background:var(--sk-field); opacity:1; }
.channel-actions .btn-small{ background:var(--sk-in-bg); color:var(--sk-in-fg); border:none; }
.emoji-picker{ border:.5px solid var(--sk-sep); border-radius:16px; background:var(--sk-card); box-shadow:0 12px 40px rgba(0,0,0,.24); }

/* ---------- permissions header: tone down gaudy gradient ---------- */
.permissions-header{ background:var(--sk-card); box-shadow:none; border:.5px solid var(--sk-sep); border-radius:var(--sk-radius); padding:22px; }
.permissions-header h2{ -webkit-text-fill-color:var(--sk-text); background:none; color:var(--sk-text); font-size:20px; }
.permissions-description{ color:var(--sk-sub); font-size:14px; }

/* ---------- modals → bottom sheets ---------- */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1000; padding:0; }
[data-theme="dark"] .modal{ background:rgba(0,0,0,.6); }
.modal-content{ position:absolute; left:50%; bottom:0; top:auto; transform:translateX(-50%);
  margin:0; width:100%; max-width:600px; max-height:92vh; overflow-y:auto;
  border-radius:16px 16px 0 0; padding:26px 20px calc(28px + env(safe-area-inset-bottom));
  background:var(--sk-card); animation:sk-sheet .34s cubic-bezier(.32,.72,0,1); }
.modal-content::before{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:36px; height:5px; border-radius:3px; background:var(--sk-sep); }
.modal-header{ font-size:17px; font-weight:700; margin-bottom:18px; }
.modal-header h3{ font-size:17px; font-weight:700; }
.modal-buttons,.modal-footer{ display:flex; gap:12px; margin-top:18px; }
.modal-buttons .btn,.modal-footer .btn{ flex:1; }

/* ---------- toast ---------- */
.sk-toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px); z-index:3000; display:flex; align-items:center; gap:10px;
  background:rgba(28,28,32,.96); color:#fff; font-size:14px; font-weight:500; line-height:1.35;
  padding:12px 18px; border-radius:13px; box-shadow:0 10px 30px rgba(0,0,0,.3);
  max-width:84%; opacity:0; transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1);
  pointer-events:none; }
[data-theme="dark"] .sk-toast{ background:rgba(8,14,22,.97); }
.sk-toast.show{ opacity:1; transform:translate(-50%,0); }
.sk-toast .sk-ico{ width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sk-toast.ok  .sk-ico{ background:#34C759; }
.sk-toast.err .sk-ico{ background:#FF3B30; }
.sk-toast.info .sk-ico{ background:var(--sk-accent); }
.sk-toast .sk-ico svg{ display:block; }

/* ---------- skeleton (available for loading states) ---------- */
.sk-skeleton{ background:linear-gradient(100deg, var(--sk-field) 30%, rgba(120,120,128,.10) 50%, var(--sk-field) 70%);
  background-size:200% 100%; animation:sk-shimmer 1.3s infinite linear; border-radius:10px; }

@keyframes sk-fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@keyframes sk-sheet{ from{transform:translate(-50%,101%);} to{transform:translate(-50%,0);} }
@keyframes sk-shimmer{ to{ background-position:-200% 0; } }

/* ============================================================
   改版结构（与设计稿一致）：分组磁贴列表 / 群组行 / 统计卡
   ============================================================ */
.sk-glabel{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--sk-sub); margin:0 4px 8px; }
.sk-card{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; margin-bottom:22px; }
.sk-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; position:relative; }
.sk-row:not(:last-child)::after{ content:''; position:absolute; left:56px; right:0; bottom:0; height:.5px; background:var(--sk-sep); }
.sk-row:active{ background:var(--sk-field); }
.sk-tile{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sk-tile svg{ display:block; }
.sk-rtext{ flex:1; min-width:0; }
.sk-rtitle{ font-size:16px; color:var(--sk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-rdesc{ font-size:12.5px; color:var(--sk-sub); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-rtrail{ font-size:13px; color:var(--sk-sub); margin-right:2px; white-space:nowrap; }
.sk-rtrail.ok{ color:var(--sk-ok-fg); }
.sk-chev{ flex-shrink:0; }

.sk-grow{ display:flex; align-items:center; gap:13px; padding:13px 14px; cursor:pointer; position:relative; }
.sk-grow:not(:last-child)::after{ content:''; position:absolute; left:71px; right:0; bottom:0; height:.5px; background:var(--sk-sep); }
.sk-grow:active{ background:var(--sk-field); }
.sk-avatar{ width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; font-weight:600; }
.sk-statbtn{ width:34px; height:34px; border-radius:9px; background:var(--sk-in-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }

.sk-statcard{ padding:16px 6px; }
.sk-3col,.sk-2col{ display:flex; }
.sk-cell{ flex:1; text-align:center; position:relative; padding:0 6px; }
.sk-cell-sep::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:.5px; background:var(--sk-sep); }
.sk-big{ font-size:24px; font-weight:700; letter-spacing:-.5px; color:var(--sk-text); }
.sk-mid{ font-size:19px; font-weight:700; color:var(--sk-text); }
.sk-clabel{ font-size:12px; color:var(--sk-sub); margin-top:3px; }
.sk-accent{ color:var(--sk-accent) !important; }
.sk-ok{ color:var(--sk-ok-fg) !important; }
.sk-er{ color:var(--sk-er-fg) !important; }
.sk-divider{ height:.5px; background:var(--sk-sep); margin:14px 12px; }
.sk-trend{ padding:8px 2px 2px; }

/* ---------- radio choice (anti-flood detection mode, etc.) ---------- */
.radio-group{ display:flex; flex-direction:column; }
.radio-option{ display:flex; align-items:center; gap:11px; padding:12px 2px; cursor:pointer;
  font-size:15px; color:var(--sk-text); }
.radio-option:not(:last-child){ border-bottom:.5px solid var(--sk-sep); }
.radio-option input[type="radio"]{ width:20px; height:20px; margin:0; accent-color:var(--sk-accent); flex-shrink:0; }
.radio-label{ font-weight:500; }
.detection-mode-settings{ margin-top:0; }

/* ---------- modal close button + header + body ---------- */
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal .close,.modal .modal-close,.modal .close-btn{ width:30px; height:30px; border-radius:50%; border:none;
  background:var(--sk-field); color:var(--sk-sub); font-size:20px; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; padding:0; margin:0; }
.modal .close:active,.modal .modal-close:active,.modal .close-btn:active{ background:var(--sk-sep); }
.modal-body{ display:flex; flex-direction:column; }
.modal-body .form-group{ margin-bottom:16px; }
.modal-body .form-row{ padding:13px 0; border-bottom:.5px solid var(--sk-sep); }
.modal-body form > .form-row:last-child{ border-bottom:none; }
.modal-body .sk-glabel{ margin-top:12px; }
.modal-body .sk-glabel:first-child{ margin-top:0; }

/* ---------- Telegram chat bubble preview (message-preview modals) ---------- */
.preview-container{ background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; }
.tg-chat-preview{ border-radius:14px; padding:22px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:linear-gradient(180deg,#e7ebd8,#d8ccb2); }
[data-theme="dark"] .tg-chat-preview{ background:linear-gradient(180deg,#0e1621,#18242f); }
.tg-bubble{ position:relative; max-width:88%; background:var(--sk-card); color:var(--sk-text);
  padding:8px 12px 5px; border-radius:12px 12px 12px 5px; box-shadow:0 1px 1.5px rgba(0,0,0,.16);
  font-size:15px; line-height:1.46; }
.tg-bubble .preview-message,.tg-bubble .preview-content{ background:transparent !important; padding:0 !important;
  border:none !important; white-space:pre-wrap; word-break:break-word; color:var(--sk-text); }
.tg-bubble-time{ display:block; text-align:right; font-size:11px; color:var(--sk-sub); margin-top:3px; user-select:none; }
.tg-chat-preview .preview-buttons{ width:88%; margin-top:3px; display:flex; flex-direction:column; gap:3px; }
.tg-chat-preview .preview-button-row{ display:flex; gap:3px; }
.tg-chat-preview .preview-button{ flex:1; text-align:center; background:rgba(255,255,255,.72); color:var(--sk-accent);
  border-radius:9px; padding:9px 8px; font-size:13.5px; font-weight:500; text-decoration:none;
  box-shadow:0 1px 1.5px rgba(0,0,0,.12); }
[data-theme="dark"] .tg-chat-preview .preview-button{ background:rgba(255,255,255,.10); color:var(--sk-on-accent); }

/* ---------- list cards polish (scheduled / rules / lottery / admins) ---------- */
.message-header,.rule-header{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.message-title,.rule-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.message-title h4,.rule-title h4{ margin:0; font-size:15px; font-weight:600; }
.message-actions,.rule-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.message-content,.rule-details{ margin-top:12px; }
.message-content p,.rule-details p{ margin:3px 0; font-size:13px; color:var(--sk-sub); line-height:1.5; }
.message-content strong,.rule-details strong{ color:var(--sk-text); font-weight:600; }

/* ---------- admin list: one grouped card, compact horizontal rows (beats legacy @media column) ---------- */
#adminListContainer{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; }
.admin-item{ background:transparent !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important; margin:0 !important; padding:11px 14px !important;
  display:flex !important; flex-direction:row !important; align-items:center !important;
  justify-content:flex-start; gap:12px !important; transform:none !important; position:relative; }
.admin-item:not(:last-child)::after{ content:''; position:absolute; left:64px; right:0; bottom:0; height:.5px; background:var(--sk-sep); }
.admin-item:hover{ background:var(--sk-field) !important; }
.admin-name{ font-weight:600; font-size:15px; color:var(--sk-text); }
.admin-details{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.admin-username{ color:var(--sk-sub); font-size:12.5px; }
.admin-status{ font-size:11px; font-weight:600; padding:2px 8px; border-radius:7px; }
.admin-status.status-creator{ background:var(--sk-wn-bg); color:var(--sk-wn-fg); }
.admin-status.status-admin{ background:var(--sk-in-bg); color:var(--sk-in-fg); }
.permission-controls{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.permission-badge,.permission-status{ font-size:11.5px; font-weight:600; white-space:nowrap; }
.permission-badge.creator,.permission-status.granted{ color:var(--sk-ok-fg); }
.permission-status.denied{ color:var(--sk-sub); }

/* ---------- action/filter containers + panels polish ---------- */
.keywords-input-group{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.keywords-input-group .form-input{ flex:1; margin:0; }
.function-buttons{ display:flex; gap:10px; margin-bottom:20px; }
.function-buttons .btn{ flex:1; }
.batch-actions{ display:flex !important; flex-direction:row !important; gap:10px; margin-top:14px; margin-bottom:22px; }
.batch-actions .btn{ flex:1; width:auto !important; }
.search-container{ display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.search-container .form-input{ flex:1; margin:0; }
/* 裸露在页面底色上的输入框（搜索/邀请设置）——底色同灰会隐形，给白底+细边 */
#messageSearch, #ruleSearch, #searchInput,
#inviteLinkSettingsPanel .form-input, #inviteLinkSettingsPanel .form-select{
  background:var(--sk-card); border:.5px solid var(--sk-sep); }
#messageSearch:focus, #ruleSearch:focus, #searchInput:focus,
#inviteLinkSettingsPanel .form-input:focus, #inviteLinkSettingsPanel .form-select:focus{
  background:var(--sk-card); border-color:var(--sk-accent); }
.admin-list-header{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between; margin-bottom:12px; gap:10px; }
.admin-list-title{ font-size:15px; font-weight:700; margin:0; color:var(--sk-text); }
.refresh-btn{ background:var(--sk-field); color:var(--sk-accent); border:none; border-radius:9px;
  padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.refresh-btn:active{ background:var(--sk-sep); }
.permissions-info{ background:var(--sk-card); border-radius:var(--sk-radius); padding:16px 18px; margin-top:8px; }
.permissions-info h4{ margin:0 0 8px; font-size:14px; color:var(--sk-text); text-transform:none; letter-spacing:0; font-weight:700; }
.permissions-info ul{ margin:0; padding-left:18px; }
.permissions-info li{ color:var(--sk-sub); font-size:13px; line-height:1.65; }
.settings-panel > h3,.users-panel > h3{ font-size:15px; font-weight:700; margin:0 0 14px; color:var(--sk-text); }

/* ============================================================
   design-spec list cards (scheduled / rules / lottery / admins / invites)
   ============================================================ */
.sk-item{ background:var(--sk-card); border-radius:var(--sk-radius); padding:14px; margin-bottom:12px; }
.sk-item-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sk-item-title{ min-width:0; }
.sk-item-title h4{ margin:0; font-size:16px; font-weight:600; color:var(--sk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-subline{ font-size:13px; color:var(--sk-sub); margin-top:4px; display:flex; align-items:center; gap:6px; line-height:1.5; }
.sk-subline svg{ flex-shrink:0; }
.sk-cap{ font-size:12.5px; color:var(--sk-sub); margin-top:9px; line-height:1.5; }

/* status pills */
.sk-pill{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; white-space:nowrap; align-self:flex-start; display:inline-block; }
.sk-pill.ok{ color:var(--sk-ok-fg); background:var(--sk-ok-bg); }
.sk-pill.warn{ color:var(--sk-wn-fg); background:var(--sk-wn-bg); }
.sk-pill.mute{ color:var(--sk-sub); background:var(--sk-field); }
.sk-pill.er{ color:var(--sk-er-fg); background:var(--sk-er-bg); }

/* action chips (full-width tinted buttons under a card) */
.sk-chips{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.sk-chip{ flex:1; min-width:60px; text-align:center; font-size:13px; font-weight:500; border-radius:9px;
  padding:8px 6px; cursor:pointer; user-select:none; }
.sk-chip:active{ opacity:.65; }
.sk-chip.accent{ color:var(--sk-accent); background:var(--sk-field); }
.sk-chip.info{ color:var(--sk-accent); background:var(--sk-in-bg); }
.sk-chip.ok{ color:var(--sk-ok-fg); background:var(--sk-ok-bg); }
.sk-chip.warn{ color:var(--sk-wn-fg); background:var(--sk-wn-bg); }
.sk-chip.er{ color:var(--sk-er-fg); background:var(--sk-er-bg); }

/* keyword chips */
.sk-kws{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sk-kw{ font-size:12.5px; color:var(--sk-text); background:var(--sk-field); padding:3px 9px; border-radius:7px; }
.sk-kw.more{ color:var(--sk-sub); background:transparent; padding:3px 4px; }

/* footer row: meta text + auto-width chips (lottery) */
.sk-item-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.sk-item-foot .sk-chip{ flex:0 0 auto; padding:7px 16px; }
.sk-meta{ flex:1; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sk-sub); min-width:0; }

/* avatar (admins / permissions) */
.sk-ava{ border-radius:50%; color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* leaderboard + invite records */
.sk-lb{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; margin-bottom:22px; }
.sk-lb-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; position:relative; }
.sk-lb-row:not(:last-child)::after{ content:''; position:absolute; left:52px; right:0; bottom:0; height:.5px; background:var(--sk-sep); }
.sk-rank{ width:26px; height:26px; border-radius:50%; color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sk-rec{ background:var(--sk-card); border-radius:var(--sk-radius); overflow:hidden; margin-bottom:14px; }
.sk-rec-row{ padding:11px 14px; position:relative; }
.sk-rec-row:not(:last-child)::after{ content:''; position:absolute; left:14px; right:0; bottom:0; height:.5px; background:var(--sk-sep); }

/* segmented control */
.sk-seg{ display:flex; gap:4px; background:var(--sk-field); border-radius:9px; padding:3px; margin-bottom:18px; }
.sk-seg > *{ flex:1; text-align:center; font-size:13px; font-weight:600; padding:7px 0; border-radius:7px;
  color:var(--sk-sub); cursor:pointer; user-select:none; }
.sk-seg > .active{ background:var(--sk-card); color:var(--sk-text); box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* neutralize earlier list-polish spacing when reused inside the new .sk-item cards */
.sk-item .message-content{ margin-top:0; }
.sk-item .message-content p{ margin:0; font-size:13px; }
.sk-item .message-title,.sk-item .rule-title{ display:block; }