:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1e2a45;
    --bg-input: #253554;
    --bg-hover: #2a3f5f;
    --text-primary: #e0e6ed;
    --text-secondary: #8899aa;
    --text-muted: #5a6a7a;
    --accent: #0088cc;
    --accent-hover: #0099dd;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --border: #2a3a50;
    --shadow: rgba(0,0,0,0.3);
    --radius: 8px;
    --radius-lg: 12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;}
.app-container{display:flex;height:100vh;}
.sidebar{width:220px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.sidebar-header{padding:20px 16px;border-bottom:1px solid var(--border);text-align:center;}
.sidebar-header h1{font-size:18px;color:var(--accent);font-weight:700;}
.sidebar-header .version{font-size:11px;color:var(--text-muted);margin-top:4px;}
.nav-menu{flex:1;padding:12px 8px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;padding:10px 14px;margin:2px 0;border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;transition:all .2s;font-size:14px;gap:10px;user-select:none;}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary);}
.nav-item.active{background:var(--accent);color:white;}
.nav-item .icon{font-size:18px;width:22px;text-align:center;}
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.page-header{padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.page-header h2{font-size:18px;font-weight:600;}
.page-body{flex:1;padding:20px 24px;overflow-y:auto;}
.page{display:none;height:100%;flex-direction:column;}
.page.active{display:flex;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.card-header h3{font-size:15px;font-weight:600;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;outline:none;white-space:nowrap;}
.btn-primary{background:var(--accent);color:white;}.btn-primary:hover{background:var(--accent-hover);}
.btn-success{background:var(--success);color:white;}
.btn-danger{background:var(--danger);color:white;}
.btn-warning{background:var(--warning);color:white;}
.btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}.btn-outline:hover{background:var(--bg-hover);color:var(--text-primary);}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:5px;font-weight:500;}
.form-control{width:100%;padding:9px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;transition:border .2s;}
.form-control:focus{border-color:var(--accent);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control{cursor:pointer;appearance:auto;}
textarea.form-control{resize:vertical;min-height:60px;font-family:inherit;}
.form-row{display:flex;gap:12px;}.form-row .form-group{flex:1;}
.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text-secondary);}
.checkbox-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);}
.table-wrapper{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;}
th{color:var(--text-secondary);font-weight:600;font-size:12px;text-transform:uppercase;}
tr:hover td{background:var(--bg-hover);}
.status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;}
.status-online,.status-completed{background:rgba(46,204,113,.15);color:var(--success);}
.status-offline,.status-failed{background:rgba(231,76,60,.15);color:var(--danger);}
.status-running{background:rgba(0,136,204,.15);color:var(--accent);}
.status-pending{background:rgba(243,156,18,.15);color:var(--warning);}
.status-paused,.status-stopped{background:rgba(90,106,122,.15);color:var(--text-muted);}
.status-info{background:rgba(0,136,204,.15);color:var(--accent);}
.status-partial{background:rgba(243,156,18,.15);color:var(--warning);}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.media-card{background:var(--bg-input);border:2px solid transparent;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;position:relative;}
.media-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.media-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,136,204,.3);}
.media-card .thumb{width:100%;height:160px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.media-card .thumb img{width:100%;height:100%;object-fit:cover;}
.media-card .thumb .type-icon{font-size:36px;color:var(--text-muted);}
.media-card .thumb .check-overlay{position:absolute;top:6px;left:6px;width:22px;height:22px;background:var(--accent);border-radius:50%;display:none;align-items:center;justify-content:center;color:white;font-size:12px;}
.media-card.selected .check-overlay{display:flex;}
.media-card .info{padding:8px 10px;}
.media-card .info .name{font-size:12px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:36px;}
.media-card .info .meta{font-size:11px;color:var(--text-muted);margin-top:3px;display:flex;justify-content:space-between;}
.post-cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;height:100%;}
.grid-thumb{overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);}
.grid-thumb img{width:100%;height:100%;object-fit:cover;}
.grid-thumb span{font-size:20px;}
.album-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:white;padding:2px 8px;border-radius:4px;font-size:11px;}
.media-count-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,136,204,.9);color:white;padding:2px 8px;border-radius:4px;font-size:11px;}

/* 关键修复：预览面板可滚动 */
.preview-panel{position:fixed;top:0;right:-460px;width:460px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border);z-index:500;transition:right .3s;display:flex;flex-direction:column;box-shadow:-4px 0 20px var(--shadow);}
.preview-panel.open{right:0;}
.preview-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.preview-body{flex:1;overflow-y:auto;padding:18px;min-height:0;}
.preview-media-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.preview-media-list img,.preview-media-list video{width:100%;border-radius:var(--radius);max-height:280px;object-fit:contain;background:var(--bg-secondary);}
.preview-field{margin-bottom:14px;}
.preview-field label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.preview-field .value{font-size:13px;color:var(--text-primary);word-break:break-all;}
.preview-buttons{display:flex;flex-direction:column;gap:10px;}
.preview-button-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;}
.preview-buttons .preview-empty{padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:12px;background:rgba(255,255,255,.02);}
.preview-btn{--btn-accent:var(--accent);--btn-bg:rgba(0,136,204,.30);--btn-text:var(--text-primary);display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-width:160px;max-width:100%;padding:10px 14px;background:var(--btn-bg);border:1px solid var(--btn-accent);border-left-width:4px;border-radius:12px;color:var(--btn-text);text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.16);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,border-color .15s ease;backdrop-filter:saturate(120%);}
.preview-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.22);filter:brightness(1.08);}
.preview-btn-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.preview-btn-emoji{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;line-height:1;}.preview-btn-label{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.preview-btn.color-red{--btn-accent:#ff6b6b;--btn-bg:rgba(255,107,107,.32);}
.preview-btn.color-orange{--btn-accent:#ff9f43;--btn-bg:rgba(255,159,67,.32);}
.preview-btn.color-yellow{--btn-accent:#feca57;--btn-bg:rgba(254,202,87,.34);--btn-text:#f6f7fb;}
.preview-btn.color-green{--btn-accent:#2ecc71;--btn-bg:rgba(46,204,113,.32);}
.preview-btn.color-blue{--btn-accent:#4da3ff;--btn-bg:rgba(77,163,255,.32);}
.preview-btn.color-purple{--btn-accent:#9b59b6;--btn-bg:rgba(155,89,182,.32);}
.preview-btn.color-gray{--btn-accent:#95a5a6;--btn-bg:rgba(149,165,166,.28);}
.preview-btn.color-black{--btn-accent:#5d6d7e;--btn-bg:rgba(93,109,126,.35);}
.preview-btn.color-default{--btn-accent:var(--accent);--btn-bg:rgba(0,136,204,.28);}
.rp-btn-preview{margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.02);}
.rp-btn-preview .preview-buttons{gap:8px;}

.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:90%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px var(--shadow);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-header h3{font-size:16px;}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;padding:4px;line-height:1;}.modal-close:hover{color:var(--text-primary);}
.modal-body{padding:20px;overflow-y:auto;flex:1;min-height:0;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
.toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 20px;border-radius:var(--radius);color:white;font-size:13px;box-shadow:0 4px 12px var(--shadow);animation:slideIn .3s;max-width:350px;}
.toast-success{background:var(--success);}.toast-error{background:var(--danger);}.toast-warning{background:var(--warning);}.toast-info{background:var(--accent);}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.progress-bar{width:100%;height:6px;background:var(--bg-input);border-radius:3px;overflow:hidden;}
.progress-bar .fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s;}
.tag{display:inline-block;padding:2px 8px;background:rgba(0,136,204,.15);color:var(--accent);border-radius:4px;font-size:11px;margin:2px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}.empty-state .icon{font-size:48px;margin-bottom:12px;}
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px 0;}
.pagination button{padding:6px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;font-size:13px;}
.pagination button:hover{background:var(--bg-hover);}
.pagination button.active{background:var(--accent);color:white;border-color:var(--accent);}
.pagination button:disabled{opacity:.4;cursor:not-allowed;}
.dialog-list{max-height:400px;overflow-y:auto;}
.dialog-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.dialog-item:hover{background:var(--bg-hover);}
.dialog-item.selected{background:rgba(0,136,204,.1);border-left:3px solid var(--accent);}
.dialog-item .avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:600;flex-shrink:0;}
.dialog-item .dialog-info{flex:1;min-width:0;}
.dialog-item .dialog-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dialog-item .dialog-type{font-size:11px;color:var(--text-muted);}
.modal-publish{width:min(960px,calc(100vw - 32px));max-width:960px;max-height:calc(100vh - 32px)}
.modal-publish .modal-body{min-width:0;padding:20px 22px}
.pub-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.65fr) minmax(220px,1fr);gap:12px;align-items:end}
.pub-controls .form-group,.pub-periodic-fields .form-group{min-width:0}
.pub-periodic-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;margin:0 0 14px;padding:12px;background:var(--bg-hover);border-radius:var(--radius)}
.pub-periodic-fields small{grid-column:1/-1;color:var(--text-muted)}
.pub-fixed-fields{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,1fr);gap:10px;padding-top:4px;border-top:1px solid var(--border)}
.pub-fixed-fields small{grid-column:1/-1;color:var(--text-muted)}
.pub-target-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:10px}
.pub-selected-wrap{min-width:0}
.modal-publish #pub-dialog-list,.modal-publish #pub-selected-targets{min-height:170px;max-height:240px!important;overflow:auto}
@media(max-width:720px){.pub-controls{grid-template-columns:1fr}.pub-periodic-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.pub-target-picker{grid-template-columns:1fr}.pub-selected-wrap{min-height:90px}}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;text-align:center;}
.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--accent);}
.stat-card .stat-label{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;}
.group-tree-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;transition:background .15s;font-size:13px;color:var(--text-secondary);}
.group-tree-item:hover{background:var(--bg-hover);}
.group-tree-item.active{background:rgba(0,136,204,.15);color:var(--accent);}
.group-tree-item .count{margin-left:auto;font-size:11px;color:var(--text-muted);}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.toolbar .search-box{flex:1;min-width:200px;position:relative;}
.toolbar .search-box input{width:100%;padding:8px 12px 8px 34px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;}
.toolbar .search-box input:focus{border-color:var(--accent);}
.toolbar .search-box .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;}
.edit-section{padding:14px 0;border-bottom:1px solid var(--border);}.edit-section:last-child{border-bottom:none;}
.edit-section h4{font-size:14px;margin-bottom:10px;}
.edit-section .hint{font-size:11px;color:var(--text-muted);margin-top:4px;}
/* 消息选择列表 */
.msg-select-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;font-size:13px;}
.msg-select-item:hover{background:var(--bg-hover);}
.msg-select-item.selected{background:rgba(0,136,204,.1);}
.msg-select-item .msg-check{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0;margin-top:2px;}
.msg-select-item .msg-body{flex:1;min-width:0;}
.msg-select-item .msg-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-select-item .msg-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
/* ── 2D 按钮编辑器：横向多按钮 + 纵向多行 ── */
.btn-editor-row{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  background:var(--bg-hover);border:1px solid var(--border);
  border-radius:6px;padding:6px 8px;margin-bottom:6px;
}
/* 单个按钮格 */
.btn-cell{
  display:flex;gap:4px;align-items:center;
  background:var(--bg-input);border:1px dashed var(--border);
  border-radius:4px;padding:4px 6px;flex-shrink:0;
}
.btn-cell .btn-text-input{width:90px;padding:3px 6px;font-size:12px;}
.btn-cell .btn-url-input {width:160px;padding:3px 6px;font-size:12px;}
.btn-cell-remove{
  border:none;background:none;color:var(--danger);
  cursor:pointer;padding:0 3px;font-size:13px;line-height:1;flex-shrink:0;
}
.btn-cell-remove:hover{opacity:.7;}
/* 行操作按钮 */
.btn-add-cell{
  flex-shrink:0;font-size:12px;padding:3px 8px;
  background:rgba(0,136,204,.10);border:1px solid var(--accent);
  color:var(--accent);border-radius:4px;cursor:pointer;
}
.btn-add-cell:hover{background:rgba(0,136,204,.22);}
.btn-remove-row{
  flex-shrink:0;font-size:12px;padding:3px 8px;
  background:rgba(220,53,69,.10);border:1px solid var(--danger);
  color:var(--danger);border-radius:4px;cursor:pointer;margin-left:auto;
}
.btn-remove-row:hover{background:rgba(220,53,69,.22);}
/* 旧版兼容（保留不删，防止其他地方引用） */
.button-editor-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.button-editor-row input{flex:1;}
.button-editor-row .btn-remove{background:var(--danger);color:white;border:none;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

.group-actions {
    margin-left: auto;
    display: none;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
}
.group-tree-item:hover .group-actions {
    display: flex;
}
.group-actions span:hover {
    opacity: 0.7;
}

/* Template Manager */
.tpl-tab { transition: all .15s; }
.tpl-tab.active, .tpl-tab:is([class*="btn-primary"]) { opacity: 1; }
.tpl-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.tpl-item:last-child { border-bottom: none; }
.tpl-info { flex: 1; min-width: 0; }
.tpl-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.tpl-preview { font-size:11px; color:var(--text-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
.tpl-actions { display:flex; gap:6px; flex-shrink:0; }

/* Emoji picker & format toolbar */
.fmt-toolbar button { line-height: 1; }
.emoji-picker { cursor: default; user-select: none; }
.emoji-picker span, .emoji-picker { cursor: pointer; }