:root,
:host {
  --w-e-textarea-bg-color: #fff;
  --w-e-textarea-color: #333;
  --w-e-textarea-border-color: #ccc;
  --w-e-textarea-slight-border-color: #e8e8e8;
  --w-e-textarea-slight-color: #d4d4d4;
  --w-e-textarea-slight-bg-color: #f5f2f0;
  --w-e-textarea-selected-border-color: #B4D5FF;
  --w-e-textarea-handler-bg-color: #4290f7;
  --w-e-toolbar-color: #595959;
  --w-e-toolbar-bg-color: #fff;
  --w-e-toolbar-active-color: #333;
  --w-e-toolbar-active-bg-color: #f1f1f1;
  --w-e-toolbar-disabled-color: #999;
  --w-e-toolbar-border-color: #e8e8e8;
  --w-e-modal-button-bg-color: #fafafa;
  --w-e-modal-button-border-color: #d9d9d9;
}

.w-e-text-container *,.w-e-toolbar *{box-sizing:border-box;margin:0;outline:none;padding:0}.w-e-text-container blockquote,.w-e-text-container li,.w-e-text-container p,.w-e-text-container td,.w-e-text-container th,.w-e-toolbar *{line-height:1.5}.w-e-text-container{background-color:var(--w-e-textarea-bg-color);color:var(--w-e-textarea-color);height:100%;position:relative}.w-e-text-container .w-e-scroll{-webkit-overflow-scrolling:touch;height:100%}.w-e-text-container [data-slate-editor]{word-wrap:break-word;border-top:1px solid transparent;min-height:100%;outline:0;padding:0 10px;white-space:pre-wrap}.w-e-text-container [data-slate-editor] p{margin:15px 0}.w-e-text-container [data-slate-editor] h1,.w-e-text-container [data-slate-editor] h2,.w-e-text-container [data-slate-editor] h3,.w-e-text-container [data-slate-editor] h4,.w-e-text-container [data-slate-editor] h5{margin:20px 0}.w-e-text-container [data-slate-editor] img{cursor:default;display:inline!important;max-width:100%;min-height:20px;min-width:20px}.w-e-text-container [data-slate-editor] span{text-indent:0}.w-e-text-container [data-slate-editor] [data-selected=true]{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-placeholder{font-style:italic;left:10px;top:17px;width:90%}.w-e-max-length-info,.w-e-text-placeholder{color:var(--w-e-textarea-slight-color);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.w-e-max-length-info{bottom:.5em;right:1em}.w-e-bar{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-color);font-size:14px;padding:0 5px}.w-e-bar svg{fill:var(--w-e-toolbar-color);height:14px;width:14px}.w-e-bar-show{display:flex}.w-e-bar-hidden{display:none}.w-e-hover-bar{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 5px #0000001f;position:absolute}.w-e-toolbar{flex-wrap:wrap;position:relative}.w-e-bar-divider{background-color:var(--w-e-toolbar-border-color);display:inline-flex;height:40px;margin:0 5px;width:1px}.w-e-bar-item{display:flex;height:40px;padding:4px;position:relative;text-align:center}.w-e-bar-item,.w-e-bar-item button{align-items:center;justify-content:center}.w-e-bar-item button{background:transparent;border:none;color:var(--w-e-toolbar-color);cursor:pointer;display:inline-flex;height:32px;overflow:hidden;padding:0 8px;white-space:nowrap}.w-e-bar-item button:hover{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item button .title{margin-left:5px}.w-e-bar-item .active{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item .disabled{color:var(--w-e-toolbar-disabled-color);cursor:not-allowed}.w-e-bar-item .disabled svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-menu-tooltip-v5:before{background-color:var(--w-e-toolbar-active-color);border-radius:5px;color:var(--w-e-toolbar-bg-color);content:attr(data-tooltip);font-size:.75em;opacity:0;padding:5px 10px;position:absolute;text-align:center;top:40px;transition:opacity .6s;visibility:hidden;white-space:pre;z-index:1}.w-e-menu-tooltip-v5:after{border:5px solid transparent;border-bottom:5px solid var(--w-e-toolbar-active-color);content:"";opacity:0;position:absolute;top:30px;transition:opacity .6s;visibility:hidden}.w-e-menu-tooltip-v5:hover:after,.w-e-menu-tooltip-v5:hover:before{opacity:1;visibility:visible}.w-e-menu-tooltip-v5.tooltip-right:before{left:100%;top:10px}.w-e-menu-tooltip-v5.tooltip-right:after{border-bottom-color:transparent;border-left-color:transparent;border-right-color:var(--w-e-toolbar-active-color);border-top-color:transparent;left:100%;margin-left:-10px;top:16px}.w-e-bar-item-group .w-e-bar-item-menus-container{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;display:none;left:0;margin-top:40px;position:absolute;top:0;z-index:1}.w-e-bar-item-group:hover .w-e-bar-item-menus-container{display:block}.w-e-select-list{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;left:0;margin-top:40px;max-height:350px;min-width:100px;overflow-y:auto;position:absolute;top:0;z-index:1}.w-e-select-list ul{line-height:1;list-style:none}.w-e-select-list ul .selected{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li{cursor:pointer;padding:7px 0 7px 25px;position:relative;text-align:left;white-space:nowrap}.w-e-select-list ul li:hover{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li svg{left:0;margin-left:5px;margin-top:-7px;position:absolute;top:50%}.w-e-bar-bottom .w-e-select-list{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-drop-panel{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;margin-top:40px;min-width:200px;padding:10px;position:absolute;top:0;z-index:1}.w-e-bar-bottom .w-e-drop-panel{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-modal{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;color:var(--w-e-toolbar-color);font-size:14px;min-height:40px;min-width:100px;padding:20px 15px 0;position:absolute;text-align:left;z-index:1}.w-e-modal .btn-close{cursor:pointer;line-height:1;padding:5px;position:absolute;right:8px;top:7px}.w-e-modal .btn-close svg{fill:var(--w-e-toolbar-color);height:10px;width:10px}.w-e-modal .babel-container{display:block;margin-bottom:15px}.w-e-modal .babel-container span{display:block;margin-bottom:10px}.w-e-modal .button-container{margin-bottom:15px}.w-e-modal button{background-color:var(--w-e-modal-button-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);cursor:pointer;font-weight:400;height:32px;padding:4.5px 15px;text-align:center;touch-action:manipulation;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.w-e-modal input[type=number],.w-e-modal input[type=text],.w-e-modal textarea{font-feature-settings:"tnum";background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);font-variant:tabular-nums;padding:4.5px 11px;transition:all .3s;width:100%}.w-e-modal textarea{min-height:60px}body .w-e-modal,body .w-e-modal *{box-sizing:border-box}.w-e-progress-bar{background-color:var(--w-e-textarea-handler-bg-color);height:1px;position:absolute;transition:width .3s;width:0}.w-e-full-screen-container{bottom:0!important;display:flex!important;flex-direction:column!important;height:100%!important;left:0!important;margin:0!important;padding:0!important;position:fixed;right:0!important;top:0!important;width:100%!important}.w-e-full-screen-container [data-w-e-textarea=true]{flex:1!important}
.w-e-text-container [data-slate-editor] code{background-color:var(--w-e-textarea-slight-bg-color);border-radius:3px;font-family:monospace;padding:3px}.w-e-panel-content-color{list-style:none;text-align:left;width:230px}.w-e-panel-content-color li{border:1px solid var(--w-e-toolbar-bg-color);border-radius:3px 3px;cursor:pointer;display:inline-block;padding:2px}.w-e-panel-content-color li:hover{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color li .color-block{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px 3px;height:17px;width:17px}.w-e-panel-content-color .active{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color .clear{line-height:1.5;margin-bottom:5px;width:100%}.w-e-panel-content-color .clear svg{height:16px;margin-bottom:-4px;width:16px}.w-e-text-container [data-slate-editor] blockquote{background-color:var(--w-e-textarea-slight-bg-color);border-left:8px solid var(--w-e-textarea-selected-border-color);display:block;font-size:100%;line-height:1.5;margin:10px 0;padding:10px}.w-e-panel-content-emotion{font-size:20px;list-style:none;text-align:left;width:300px}.w-e-panel-content-emotion li{border-radius:3px 3px;cursor:pointer;display:inline-block;padding:0 5px}.w-e-panel-content-emotion li:hover{background-color:var(--w-e-textarea-slight-bg-color)}.w-e-textarea-divider{border-radius:3px;margin:20px auto;padding:20px}.w-e-textarea-divider hr{background-color:var(--w-e-textarea-border-color);border:0;display:block;height:1px}.w-e-text-container [data-slate-editor] pre>code{background-color:var(--w-e-textarea-slight-bg-color);border:1px solid var(--w-e-textarea-slight-border-color);border-radius:4px 4px;display:block;font-size:14px;padding:10px;text-indent:0}.w-e-text-container [data-slate-editor] .w-e-image-container{display:inline-block;margin:0 3px}.w-e-text-container [data-slate-editor] .w-e-image-container:hover{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-container [data-slate-editor] .w-e-selected-image-container{overflow:hidden;position:relative}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .w-e-image-dragger{background-color:var(--w-e-textarea-handler-bg-color);height:7px;position:absolute;width:7px}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-top{cursor:nwse-resize;left:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-top{cursor:nesw-resize;right:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-bottom{bottom:0;cursor:nesw-resize;left:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-bottom{bottom:0;cursor:nwse-resize;right:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container:hover{box-shadow:none}.w-e-text-container [contenteditable=false] .w-e-image-container:hover{box-shadow:none}

.w-e-text-container [data-slate-editor] .table-container{border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin-top:10px;overflow-x:auto;padding:10px;width:100%}.w-e-text-container [data-slate-editor] table{border-collapse:collapse}.w-e-text-container [data-slate-editor] table td,.w-e-text-container [data-slate-editor] table th{border:1px solid var(--w-e-textarea-border-color);line-height:1.5;min-width:30px;padding:3px 5px;text-align:left}.w-e-text-container [data-slate-editor] table th{background-color:var(--w-e-textarea-slight-bg-color);font-weight:700;text-align:center}.w-e-panel-content-table{background-color:var(--w-e-toolbar-bg-color)}.w-e-panel-content-table table{border-collapse:collapse}.w-e-panel-content-table td{border:1px solid var(--w-e-toolbar-border-color);cursor:pointer;height:15px;padding:3px 5px;width:20px}.w-e-panel-content-table td.active{background-color:var(--w-e-toolbar-active-bg-color)}
.w-e-textarea-video-container{background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,#fff 0,#fff 75%,#eee 0,#eee);background-position:0 0,10px 10px;background-size:20px 20px;border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin:10px auto 0;padding:10px 0;text-align:center}

.w-e-text-container [data-slate-editor] pre>code{word-wrap:normal;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;-webkit-hyphens:none;hyphens:none;line-height:1.5;margin:.5em 0;overflow:auto;padding:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}.w-e-text-container [data-slate-editor] pre>code .token.cdata,.w-e-text-container [data-slate-editor] pre>code .token.comment,.w-e-text-container [data-slate-editor] pre>code .token.doctype,.w-e-text-container [data-slate-editor] pre>code .token.prolog{color:#708090}.w-e-text-container [data-slate-editor] pre>code .token.punctuation{color:#999}.w-e-text-container [data-slate-editor] pre>code .token.namespace{opacity:.7}.w-e-text-container [data-slate-editor] pre>code .token.boolean,.w-e-text-container [data-slate-editor] pre>code .token.constant,.w-e-text-container [data-slate-editor] pre>code .token.deleted,.w-e-text-container [data-slate-editor] pre>code .token.number,.w-e-text-container [data-slate-editor] pre>code .token.property,.w-e-text-container [data-slate-editor] pre>code .token.symbol,.w-e-text-container [data-slate-editor] pre>code .token.tag{color:#905}.w-e-text-container [data-slate-editor] pre>code .token.attr-name,.w-e-text-container [data-slate-editor] pre>code .token.builtin,.w-e-text-container [data-slate-editor] pre>code .token.char,.w-e-text-container [data-slate-editor] pre>code .token.inserted,.w-e-text-container [data-slate-editor] pre>code .token.selector,.w-e-text-container [data-slate-editor] pre>code .token.string{color:#690}.w-e-text-container [data-slate-editor] pre>code .language-css .token.string,.w-e-text-container [data-slate-editor] pre>code .style .token.string,.w-e-text-container [data-slate-editor] pre>code .token.entity,.w-e-text-container [data-slate-editor] pre>code .token.operator,.w-e-text-container [data-slate-editor] pre>code .token.url{color:#9a6e3a}.w-e-text-container [data-slate-editor] pre>code .token.atrule,.w-e-text-container [data-slate-editor] pre>code .token.attr-value,.w-e-text-container [data-slate-editor] pre>code .token.keyword{color:#07a}.w-e-text-container [data-slate-editor] pre>code .token.class-name,.w-e-text-container [data-slate-editor] pre>code .token.function{color:#dd4a68}.w-e-text-container [data-slate-editor] pre>code .token.important,.w-e-text-container [data-slate-editor] pre>code .token.regex,.w-e-text-container [data-slate-editor] pre>code .token.variable{color:#e90}.w-e-text-container [data-slate-editor] pre>code .token.bold,.w-e-text-container [data-slate-editor] pre>code .token.important{font-weight:700}.w-e-text-container [data-slate-editor] pre>code .token.italic{font-style:italic}.w-e-text-container [data-slate-editor] pre>code .token.entity{cursor:help}/* ===== CBPANDA AI 全局样式（源自产品骨架设计） ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* #root 是垂直 flex 容器：标题栏 + 三栏横排 */
#root {
  display: flex;
  flex-direction: column;
}

body {
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  background: #0a0c14 url('./bg-BQUf0OiK.jpg') center/cover no-repeat fixed;
  overflow: hidden;
  user-select: none;
  color: #e0e0e8;
}

/* ---------- 自定义标题栏 ---------- */
.titlebar {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 14, 20, 0.6);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.titlebar-drag {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 16px;
  -webkit-app-region: drag;
  user-select: none;
}
.titlebar-title {
  font-size: 13px;
  font-weight: 700;
  color: #d0d6e0;
  letter-spacing: 0.5px;
}
.titlebar-subtitle {
  font-size: 11px;
  color: #6a7488;
  margin-left: 6px;
  font-weight: 400;
}
.titlebar-controls {
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag;
}
.titlebar-btn {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.titlebar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #d0d6e0;
}
.titlebar-btn-close:hover {
  background: #e81123;
  color: #fff;
}

/* app-body：标题栏下方的三栏横排区域 */
.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ---------- 左侧导航 ---------- */
.sidebar {
  width: 240px;
  background: rgba(18, 22, 32, 0.55);
  color: #b0b8c8;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  transition: width 0.2s ease;
}

.sidebar .logo {
  padding: 24px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: default;
  user-select: none;
}

.sidebar-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #5a6478;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s;
}

.sidebar-toggle:hover {
  color: #c0c8d8;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---- 收起态 ---- */
.sidebar.collapsed {
  width: 64px;
}

.sidebar.collapsed .logo {
  padding: 22px 8px;
  font-size: 20px;
  justify-content: center;
  cursor: pointer;
}

.sidebar.collapsed .logo-text {
  display: none;
}

.sidebar.collapsed .nav-item {
  padding: 14px 0;
  justify-content: center;
  gap: 0;
  border-left-width: 2px;
}

.sidebar.collapsed .nav-label {
  display: none;
}

.sidebar.collapsed .sidebar-footer {
  padding: 10px 0;
  text-align: center;
}

.footer-toggle {
  font-size: 14px;
  padding: 6px 10px;
}

.nav {
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  padding: 11px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  transition: background 0.2s;
  border-left: 3px solid transparent;
  color: #8a94a8;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c0c8d8;
}

.nav-item.active {
  background: rgba(52, 152, 219, 0.12);
  color: #4da6ff;
  border-left-color: #4da6ff;
}

.sidebar .sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #5a6478;
}

/* ---- 管理员入口（底部独立区，footer 分割线上方） ---- */
.sidebar .nav-admin {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 0;
  flex-shrink: 0;
}

.sidebar .nav-admin .nav-item {
  font-size: 13px;
  padding: 12px 20px;
  color: #7d8799;
}

.sidebar .nav-admin .nav-item:hover {
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
}

.sidebar .nav-admin .nav-item.active {
  background: rgba(231, 76, 60, 0.12);
  color: #e74c3c;
  border-left-color: #e74c3c;
}

.sidebar.collapsed .nav-admin {
  padding: 2px 0;
}

.sidebar.collapsed .nav-admin .nav-item {
  padding: 12px 0;
  justify-content: center;
}

.sidebar.collapsed .nav-admin .nav-label {
  display: none;
}

/* ---------- 中间主面板容器 ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.panel {
  display: none;
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.panel.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-header {
  margin-bottom: 20px;
}

.panel-header h2 {
  font-size: 24px;
  color: #e0e0e8;
}

.panel-header p {
  color: #8a94a8;
  margin-top: 4px;
}

.placeholder-card {
  background: rgba(24, 28, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #7a8298;
  margin-top: 40px;
  font-size: 14px;
  line-height: 2;
  backdrop-filter: blur(8px);
}

.placeholder-card small {
  display: block;
  color: #5a6478;
}

/* ---------- 右侧任务栏 ---------- */
.taskbar {
  width: 320px;
  background: rgba(18, 22, 32, 0.55);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  font-size: 13px;
  transition: width 0.25s ease;
  overflow: hidden;
  color: #b0b8c8;
}

/* 折叠态：窄条 */
.taskbar-collapsed {
  width: 46px;
}

/* 收起/展开按钮 */
.taskbar-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #7a8298;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.25s;
}
.taskbar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #c0c8d8;
}
.taskbar-collapsed .taskbar-toggle {
  margin: 10px auto 6px;
}

/* 折叠态竖排内容 */
.taskbar-collapsed-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.taskbar-collapsed-label {
  font-size: 11px;
  color: #5a6478;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 2px;
}
.taskbar-collapsed-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #4da6ff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 展开态头部右侧分组 */
.taskbar-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.taskbar-spacer {
  flex: 1;
  min-height: 0;
}

.taskbar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 700;
  color: #d0d6e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

.taskbar-header .taskbar-count {
  font-size: 12px;
  color: #6a7488;
  font-weight: 400;
}

.task-list {
  flex: 0 0 auto;
  max-height: 220px;
  overflow-y: auto;
  min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.task-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f6fa;
}

.task-item:last-child {
  border-bottom: none;
}

.task-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 500;
  color: #c0c8d8;
}

.task-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

.task-status.running {
  background: #eaf2fd;
  color: #3498db;
}

.task-status.done {
  background: #e6f9ee;
  color: #27ae60;
}

.task-status.failed {
  background: #fdecea;
  color: #e74c3c;
}

.progress-bar-bg {
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #3498db;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* ---------- 日志面板 ---------- */
.log-panel {
  flex: 0 0 150px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  color: #c0c8d8;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.log-panel-header {
  padding: 4px 12px;
  background: #161b22;
  color: #6a7488;
  font-weight: 600;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.log-output {
  flex: 1;
  min-height: 0;
  padding: 4px 12px;
  overflow-y: hidden;
  white-space: pre-wrap;
  line-height: 1.5;
}

.log-line {
  margin-bottom: 2px;
}

.log-time {
  color: #6a9955;
}

.log-info {
  color: #4ec9b0;
}

.log-warn {
  color: #dcdcaa;
}

.log-error {
  color: #f44747;
}

/* 实时工作流（嵌入 Taskbar 顶部） */
.workflow-section {
  padding: 8px 0;
  flex-shrink: 0;
}
.workflow-section-header {
  padding: 6px 16px;
  font-weight: 700;
  font-size: 12px;
  color: #6a7488;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.workflow-section-list {
  padding: 0 12px;
}
.workflow-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  font-size: 12px;
  color: #b0b8c8;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.workflow-section-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.workflow-section-item.active {
  background: rgba(77, 166, 255, 0.08);
  border-left: 2px solid #4da6ff;
}
.wf-item-left {
  display: flex; flex-direction: column; overflow: hidden; flex: 1;
}
.wf-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-item-msg-count {
  font-size: 10px; color: #5a6478;
}
.wf-delete-btn {
  background: none; border: none; color: #6a7488; cursor: pointer;
  font-size: 11px; padding: 0 2px; line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.workflow-section-item:hover .wf-delete-btn { opacity: 1; }
.wf-delete-btn:hover { color: #e74c3c; }

/* 工作流详情面板 */
.wf-detail-panel {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 25, 36, 0.5);
  flex-shrink: 0;
}
.wf-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: #c0c8d8;
}
.wf-detail-close {
  background: none; border: none; color: #6a7488; cursor: pointer; font-size: 14px;
}
.wf-detail-row {
  margin-bottom: 10px;
}
.wf-detail-row label {
  display: block; font-size: 10px; color: #6a7488; margin-bottom: 4px; font-weight: 600;
}
.wf-detail-row input {
  width: 100%; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px; background: rgba(10, 14, 20, 0.4); color: #c0c8d8; font-size: 12px; outline: none;
}
.wf-status-btn {
  padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px; background: transparent; color: #8a94a8; font-size: 12px; cursor: pointer;
}
.wf-status-btn:hover { border-color: #4da6ff; color: #4da6ff; }
.wf-steps-list {
  display: flex; flex-direction: column; gap: 3px;
}
.wf-step-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 6px; background: rgba(10, 14, 20, 0.3); border-radius: 4px;
  font-size: 12px; color: #b0b8c8;
}
.wf-step-item button {
  background: none; border: none; color: #6a7488; cursor: pointer; font-size: 12px;
}
.wf-step-item button:hover { color: #e74c3c; }
.workflow-section-item .wf-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.wf-running {
  background: rgba(77, 166, 255, 0.15);
  color: #4da6ff;
}
.wf-waiting {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}
.wf-done {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}
.workflow-section-btn {
  display: block;
  margin: 6px 12px;
  padding: 8px 0;
  width: calc(100% - 24px);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  color: #6a7488;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.workflow-section-btn:hover {
  border-color: #4da6ff;
  color: #4da6ff;
}
.wf-new-input {
  display: flex; gap: 6px; padding: 6px 12px;
}
.wf-new-input input {
  flex: 1; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none;
}

/* ---------- 滚动条（暗色区域适配） ---------- */
/* 全局 textarea：暗色细滚动条（与主题一致） */
textarea::-webkit-scrollbar { width: 6px; }
textarea::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

.nav::-webkit-scrollbar,
.dispatch-messages::-webkit-scrollbar {
  width: 6px;
}

.nav::-webkit-scrollbar-thumb,
.dispatch-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.nav::-webkit-scrollbar-track,
.dispatch-messages::-webkit-scrollbar-track {
  background: transparent;
}

.task-list::-webkit-scrollbar,
.panel::-webkit-scrollbar,
.dispatch-messages::-webkit-scrollbar {
  width: 8px;
}

.task-list::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,
.dispatch-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.task-list::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track,
.dispatch-messages::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== 多智能体统一调度台样式 ===== */
.agent-dispatch-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: transparent;
}
/* 顶部横排智能体栏 */
.agent-online-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
  -ms-overflow-style: none; /* IE/Edge */
}
.agent-online-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.agent-online-item {
  padding: 6px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.04); color: #8a94a8;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid transparent; white-space: nowrap; transition: all 0.2s;
}
.agent-online-item:hover { background: rgba(255, 255, 255, 0.08); color: #c0c8d8; }
.agent-online-item.active { background: rgba(77, 166, 255, 0.12); color: #4da6ff; border-color: #4da6ff; }
.agent-online-item .agent-dot { width: 8px; height: 8px; border-radius: 50%; }
.agent-kb-btn { background: transparent; border: none; font-size: 12px; cursor: pointer; padding: 0 2px; opacity: 0.7; transition: opacity 0.15s; }
.agent-kb-btn:hover { opacity: 1; }
.agent-dot.online { background: #27ae60; }
.agent-dot.busy { background: #e67e22; }
.agent-dot.offline { background: #bdc3c7; }
.add-agent-btn {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15); background: transparent;
  color: #6a7488; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.add-agent-btn:hover { border-color: #4da6ff; color: #4da6ff; }

/* ---- 共享对话区 ---- */
.dispatch-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ---- 上下文过滤标签栏 ---- */
.dispatch-filter-bar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  overflow-x: auto;
}
.filter-tab {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.filter-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c0c8d8;
}
.filter-tab.active {
  background: rgba(77, 166, 255, 0.15);
  border-color: #4da6ff;
  color: #4da6ff;
  font-weight: 600;
}

.dispatch-messages {
  flex: 1;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
}

/* 消息样式 */
.dispatch-message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  user-select: text;
}
.dispatch-message.system {
  align-self: center;
  background: rgba(255, 255, 255, 0.05);
  color: #6a7488;
  font-size: 12px;
  border-radius: 8px;
  padding: 6px 16px;
}
.dispatch-message.agent {
  align-self: flex-start;
  background: rgba(30, 35, 50, 0.9);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: 4px;
  color: #c0c8d8;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dispatch-message.user {
  align-self: flex-end;
  background: #4da6ff;
  color: white;
  border-bottom-right-radius: 4px;
}
.dispatch-message .agent-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
  background: rgba(77, 166, 255, 0.15);
  color: #4da6ff;
}
.dispatch-message .dispatch-msg-time {
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.5;
  text-align: right;
}

/* 工具调用卡片 */
.tool-inline-card {
  margin-top: 8px;
  background: rgba(77, 166, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #b0b8c8;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(77, 166, 255, 0.15);
}
.tool-inline-card .tool-progress {
  height: 4px;
  background: #4da6ff;
  border-radius: 2px;
}

/* ---- 输入区 ---- */
.dispatch-input-area {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  flex-shrink: 0;
}
.clarify-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 2px 6px; border-radius: 8px;
  background: rgba(77, 166, 255, 0.08); border: 1px solid rgba(77, 166, 255, 0.2);
  color: #b0c8e8; font-size: 12px;
}
.clarify-banner b { color: #e8f0ff; font-weight: 600; }
.clarify-skip-btn {
  margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.15);
  color: #8a94a8; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.clarify-skip-btn:hover { color: #c0c8d8; border-color: rgba(255,255,255,0.3); }
.mention-hint {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.mention-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(77, 166, 255, 0.12);
  color: #4da6ff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
}
.mention-tag:hover {
  background: #4da6ff;
  color: #fff;
}
.dispatch-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.dispatch-input-row textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  resize: none;
  height: 44px;
  font-family: inherit;
  background: rgba(10, 14, 20, 0.5);
  color: #d0d6e0;
}
.dispatch-input-row textarea:focus {
  border-color: #4da6ff;
}
.dispatch-input-row textarea::placeholder {
  color: #5a6478;
}
.dispatch-input-row button {
  background: #4da6ff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dispatch-input-row button:hover {
  background: #3d8ce0;
}

.vc-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.vc-progress > div {
  height: 100%;
  background: linear-gradient(90deg, #4da6ff, #6c5ce7);
  border-radius: 2px;
  transition: width 0.2s;
}

/* typing 省略号动画 */
.typing-dots span {
  animation: blink 1.4s infinite both;
  font-style: normal;
  font-size: 18px;
  line-height: 0;
  margin-left: 2px;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* 图片上传预览 */
.image-preview-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 90px;
}
.image-thumbs { display: flex; gap: 6px; flex: 1; overflow-x: auto; overflow-y: hidden; }
.image-thumb {
  width: 60px; height: 60px; border-radius: 6px; overflow: hidden;
  position: relative; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-thumb span {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 8px; padding: 2px 4px; text-align: center; white-space: nowrap; overflow: hidden;
}
.clear-images-btn {
  padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  background: transparent; color: #e74c3c; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.clear-images-btn:hover { border-color: #e74c3c; }

/* 📎 上传按钮 */
.upload-btn {
  padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
  cursor: pointer; font-size: 16px; display: flex; align-items: center;
  color: #6a7488; background: transparent; transition: all 0.15s;
}
.upload-btn:hover { border-color: #4da6ff; color: #4da6ff; }

/* 消息中嵌入图片 */
.message-image {
  max-width: 200px; border-radius: 10px; margin-top: 8px; display: block;
}
/* 图片缩略图（直接 img 标签） */
.image-thumb {
  width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
}
.image-thumb:hover { border-color: #4da6ff; }

/* ===== 智能客服面板 ===== */
.shopify-cs-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(77, 166, 255, 0.06);
  border: 1px solid rgba(77, 166, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cs-layout { display: flex; flex: 1; overflow: hidden; }
.cs-sidebar { width: 300px; background: rgba(18,22,32,0.5); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; flex-shrink: 0; }
.cs-sidebar-header { padding: 14px 16px; font-weight: 700; color: #c0c8d8; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; }
.cs-unread-badge { background: #e74c3c; color: white; padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.cs-search { margin: 8px 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 13px; outline: none; }
.cs-search::placeholder { color: #5a6478; }
.cs-conv-list { flex: 1; overflow-y: auto; }
.cs-conv-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }
.cs-conv-item:hover { background: rgba(255,255,255,0.03); }
.cs-conv-item.active { background: rgba(77,166,255,0.08); border-left: 3px solid #4da6ff; }
.cs-conv-item.unread { font-weight: 600; }
.cs-conv-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.cs-conv-name { color: #d0d6e0; font-size: 14px; }
.cs-conv-channel { font-size: 11px; color: #6a7488; background: rgba(255,255,255,0.04); padding: 1px 8px; border-radius: 4px; }
.cs-conv-preview { font-size: 12px; color: #6a7488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

.cs-chat-area { flex: 1; display: flex; flex-direction: column; }
.cs-chat-header { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; align-items: center; color: #c0c8d8; }
.cs-order-info { font-size: 12px; color: #6a7488; }
.cs-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cs-msg { max-width: 70%; }
.cs-msg-agent { align-self: flex-end; }
.cs-msg-customer { align-self: flex-start; }
.cs-msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.cs-msg-agent .cs-msg-bubble { background: rgba(77,166,255,0.15); color: #d0d6e0; border-bottom-right-radius: 4px; }
.cs-msg-customer .cs-msg-bubble { background: rgba(255,255,255,0.06); color: #c0c8d8; border-bottom-left-radius: 4px; }
.cs-msg-time { font-size: 10px; color: #5a6478; margin-top: 4px; text-align: right; }
.cs-msg-customer .cs-msg-time { text-align: left; }
.cs-input-area { border-top: 1px solid rgba(255,255,255,0.06); padding: 10px 16px; }
.cs-quick-replies { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; padding-bottom: 4px; }
.cs-qr-btn { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: transparent; color: #8a94a8; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cs-qr-btn:hover { border-color: #4da6ff; color: #4da6ff; }
.cs-input-row { display: flex; gap: 8px; }
.cs-input-row textarea { flex: 1; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 14px; resize: none; outline: none; font-family: inherit; min-height: 40px; }
.cs-input-row textarea::placeholder { color: #5a6478; }
.cs-input-row button { padding: 10px 20px; border: none; border-radius: 10px; background: #4da6ff; color: white; font-weight: 600; cursor: pointer; }
.cs-input-row button:hover { background: #3d8ce0; }
.cs-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #5a6478; font-size: 14px; }
.cs-layout {
  display: flex;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- 左侧会话列表 ---- */
.cs-sidebar {
  width: 260px;
  background: rgba(18, 22, 32, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.cs-channel-filter {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cs-channel-filter select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.5);
  color: #c0c8d8;
  font-size: 13px;
  outline: none;
}
.cs-conversation-list {
  flex: 1;
  overflow-y: auto;
}
.cs-conversation-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.cs-conversation-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.cs-conversation-item.active {
  background: rgba(77, 166, 255, 0.1);
}
.cs-conv-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.cs-conv-name {
  font-weight: 600;
  font-size: 13px;
  color: #d0d6e0;
}
.cs-conv-time {
  margin-left: auto;
  font-size: 11px;
  color: #5a6478;
}
.cs-channel-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
}
.cs-channel-taobao {
  background: rgba(255, 102, 0, 0.15);
  color: #ff8844;
}
.cs-channel-amazon {
  background: rgba(255, 153, 0, 0.15);
  color: #ffb84d;
}
.cs-channel-shopify {
  background: rgba(39, 174, 96, 0.15);
  color: #2ecc71;
}
.cs-channel-whatsapp {
  background: rgba(37, 211, 102, 0.15);
  color: #25d366;
}
.cs-conv-msg {
  font-size: 12px;
  color: #8a94a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-conv-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.cs-conv-lang {
  font-size: 10px;
  color: #5a6478;
}
.cs-unread-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4da6ff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 中间聊天窗 ---- */
.cs-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cs-chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(20, 25, 36, 0.3);
}
.cs-contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-contact-info strong {
  font-size: 15px;
  color: #d0d6e0;
}
.cs-language {
  font-size: 11px;
  color: #6a7488;
}
.cs-translate-toggle label {
  font-size: 12px;
  color: #8a94a8;
  cursor: pointer;
}
.cs-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.cs-msg-customer {
  align-self: flex-start;
  background: rgba(30, 35, 50, 0.9);
  color: #c0c8d8;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.cs-msg-agent {
  align-self: flex-end;
  background: #4da6ff;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cs-msg-system {
  align-self: center;
  font-size: 12px;
  color: #6a7488;
  background: transparent;
}
.cs-msg-time {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.5;
  text-align: right;
}

/* ---- 快捷回复 ---- */
.cs-compose {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 25, 36, 0.3);
  flex-shrink: 0;
}
.cs-quick-replies {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-wrap: wrap;
}
.quick-reply-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-reply-btn:hover {
  border-color: #4da6ff;
  color: #4da6ff;
}
.cs-input-row {
  display: flex;
  gap: 8px;
  padding: 0 12px 8px;
}
.cs-input-row textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.5);
  color: #d0d6e0;
  font-size: 13px;
  outline: none;
  resize: none;
  height: 36px;
  font-family: inherit;
}
.cs-input-row textarea:focus {
  border-color: #4da6ff;
}
.cs-input-row button {
  background: #4da6ff;
  color: #fff;
  border: none;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cs-ai-suggestions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 10px;
  font-size: 12px;
  color: #8a94a8;
}
.cs-ai-suggestions em {
  white-space: nowrap;
  color: #6a7488;
}
.cs-ai-suggestions span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b0b8c8;
}
.cs-ai-suggestions button {
  padding: 3px 10px;
  border: 1px solid #4da6ff;
  border-radius: 10px;
  background: transparent;
  color: #4da6ff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- 右侧客户/订单信息 ---- */
.cs-detail-panel {
  width: 220px;
  background: rgba(18, 22, 32, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
  flex-shrink: 0;
  overflow-y: auto;
}
.cs-info-card,
.cs-order-card {
  background: rgba(20, 25, 36, 0.5);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cs-info-card h4,
.cs-order-card h4 {
  font-size: 13px;
  color: #d0d6e0;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cs-info-card p,
.cs-order-card p {
  font-size: 12px;
  color: #8a94a8;
  margin-bottom: 4px;
}
.cs-info-card strong,
.cs-order-card strong {
  color: #c0c8d8;
}
.order-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(39, 174, 96, 0.15);
  color: #2ecc71;
  font-size: 11px;
}
.action-btn {
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.action-btn:hover {
  border-color: #4da6ff;
  color: #4da6ff;
}
.cs-stats-mini {
  display: flex;
  gap: 10px;
}
.cs-stats-mini .stat {
  flex: 1;
  text-align: center;
  background: rgba(20, 25, 36, 0.5);
  border-radius: 8px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cs-stats-mini .stat span {
  display: block;
  font-size: 10px;
  color: #6a7488;
}
.cs-stats-mini .stat strong {
  font-size: 18px;
  color: #d0d6e0;
}

/* ===== ERP 管理面板 ===== */
.erp-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

/* 统计卡片行 */
.erp-stats-row {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.erp-stat-card {
  flex: 1;
  background: rgba(18, 22, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 20px;
}
.stat-label {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #d0d6e0;
}
.stat-change {
  font-size: 12px;
  margin-top: 4px;
}
.stat-change.up { color: #2ecc71; }
.stat-change.down { color: #e74c3c; }

/* 标签切换栏 */
.erp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: rgba(18, 22, 32, 0.4);
  padding: 6px;
  border-radius: 10px;
}
.erp-tab {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.erp-tab:hover {
  color: #c0c8d8;
}
.erp-tab.active {
  background: rgba(77, 166, 255, 0.15);
  color: #4da6ff;
  border-radius: 8px;
  border-bottom-color: transparent;
}

/* 内容区 */
.erp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 工具栏 */
.erp-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.erp-toolbar input,
.erp-toolbar select {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.5);
  color: #c0c8d8;
  font-size: 13px;
  outline: none;
}
.erp-toolbar input:focus,
.erp-toolbar select:focus {
  border-color: #4da6ff;
}
.erp-toolbar select option {
  background: #1a1e2a;
  color: #c0c8d8;
}
.erp-toolbar-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #4da6ff;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-toolbar-btn:hover {
  background: #3d8ce0;
}

/* 表格 */
.erp-table-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.erp-table th {
  padding: 10px 12px;
  text-align: left;
  background: rgba(20, 25, 36, 0.6);
  color: #6a7488;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.erp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #b0b8c8;
}
.erp-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* 标签色 */
.erp-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}
.erp-tag-taobao { background: rgba(255, 102, 0, 0.15); color: #ff8844; }
.erp-tag-amazon { background: rgba(255, 153, 0, 0.15); color: #ffb84d; }
.erp-tag-shopify { background: rgba(39, 174, 96, 0.15); color: #2ecc71; }
.erp-tag-pending { background: rgba(243, 156, 18, 0.15); color: #f39c12; }
.erp-tag-shipping { background: rgba(77, 166, 255, 0.15); color: #4da6ff; }
.erp-tag-done { background: rgba(39, 174, 96, 0.15); color: #2ecc71; }
.erp-tag-cancelled { background: rgba(189, 195, 199, 0.15); color: #95a5a6; }
.erp-tag-success { background: rgba(39, 174, 96, 0.15); color: #2ecc71; }
.erp-tag-warning { background: rgba(230, 126, 34, 0.15); color: #e67e22; }
.erp-tag-danger { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }

.erp-action-sm {
  padding: 3px 10px;
  border: none;
  border-radius: 6px;
  background: #4da6ff;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.erp-action-sm:hover {
  background: #3d8ce0;
}

/* 分页 */
.erp-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: #6a7488;
}
.erp-pagination button {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  cursor: pointer;
  font-size: 12px;
}
.erp-pagination button:hover:not(:disabled) {
  border-color: #4da6ff;
  color: #4da6ff;
}
.erp-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.current-page {
  font-weight: 700;
  color: #d0d6e0;
}

/* ===== 创作推广融合面板 ===== */
.ccp-layout { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.ccp-tabs { display: flex; background: rgba(20,24,36,0.5); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ccp-tab { flex: 1; padding: 12px; background: transparent; color: #8a94a8; border: none; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; }
.ccp-tab:hover { color: #c0c8d8; background: rgba(255,255,255,0.03); }
.ccp-tab.active { background: rgba(77,166,255,0.08); color: #4da6ff; border-bottom: 2px solid #4da6ff; }
.ccp-content { flex: 1; overflow-y: auto; }
.ccp-panel { display: none; }
.ccp-panel.active { display: flex; flex-direction: column; }

/* 媒体创作子面板 v2（竖排三区） */
.media-v2 { display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; padding: 4px 0; }
.mv2-row { display: flex; gap: 10px; align-items: stretch; }
.mv2-input-area { flex: 1; }
.mv2-input-area textarea { width: 100%; height: 80px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); color: #c0c8d8; border-radius: 10px; padding: 10px; font-size: 13px; outline: none; resize: none; }
.mv2-input-area textarea:focus { border-color: rgba(77,166,255,0.3); }
.mv2-output-area { flex: 1; background: rgba(10,14,20,0.3); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 10px; font-size: 13px; color: #b0b8c8; overflow-y: auto; white-space: pre-wrap; }
.mv2-output { min-height: 60px; }
.mv2-actions { display: flex; align-items: center; }
.mv2-gen-btn { padding: 10px 20px; background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mv2-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 图片/视频生成区 */
.mv2-media-row { display: flex; gap: 10px; align-items: center; padding: 10px; background: rgba(20,24,36,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; }
.mv2-media-select { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mv2-label { font-size: 12px; color: #6a7488; white-space: nowrap; }
.mv2-type-tabs { display: flex; gap: 4px; }
.mv2-type-btn { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.08); background: transparent; color: #8a94a8; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.mv2-type-btn.active { background: rgba(77,166,255,0.1); border-color: #4da6ff; color: #4da6ff; }
.mv2-media-input { flex: 1; }
.mv2-media-input textarea { width: 100%; height: 50px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); color: #c0c8d8; border-radius: 8px; padding: 8px; font-size: 12px; outline: none; resize: none; }
.mv2-media-input textarea:focus { border-color: rgba(77,166,255,0.3); }
.mv2-media-preview { width: 120px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.mv2-img-placeholder, .mv2-vid-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,14,20,0.5); border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; font-size: 18px; color: #6a7488; }
.mv2-img-placeholder span, .mv2-vid-placeholder span { font-size: 10px; margin-top: 2px; }

/* 发布区 */
.mv2-publish-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(20,24,36,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; }
.mv2-pub-platforms { display: flex; flex-direction: column; gap: 4px; }
.mv2-pub-textarea { flex: 1; height: 50px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); color: #c0c8d8; border-radius: 8px; padding: 8px; font-size: 13px; outline: none; resize: none; }
.mv2-pub-textarea:focus { border-color: rgba(77,166,255,0.3); }
.mv2-pub-btn { padding: 10px 20px; background: #27ae60; color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mv2-pub-btn:hover { background: #219a52; }

/* 邮件推广子面板 */
.email-layout { display: flex; gap: 14px; flex: 1; overflow: hidden; }
.email-accounts { width: 180px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.email-accounts h4 { color: #c0c8d8; margin: 0; font-size: 14px; }
.email-add-btn { background: rgba(77,166,255,0.1); color: #4da6ff; border: 1px solid rgba(77,166,255,0.2); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.email-acct-list { display: flex; flex-direction: column; gap: 4px; }
.email-acct-item { font-size: 12px; color: #929aaa; padding: 4px 8px; background: rgba(10,14,20,0.4); border-radius: 4px; word-break: break-all; }
.email-compose { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.email-compose input { padding: 10px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #c0c8d8; font-size: 14px; outline: none; }
.email-compose input:focus { border-color: rgba(77,166,255,0.3); }
.email-actions { display: flex; gap: 8px; align-items: center; }
.email-actions select { padding: 8px; background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #c0c8d8; font-size: 13px; outline: none; }
.email-gen-btn, .email-send-btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.email-gen-btn { background: rgba(77,166,255,0.1); color: #4da6ff; }
.email-gen-btn:hover { background: rgba(77,166,255,0.18); }
.email-send-btn { background: #27ae60; color: white; }
.email-send-btn:hover { background: #219a52; }
.email-gen-btn:disabled, .email-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.email-compose textarea { flex: 1; min-height: 200px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); color: #c0c8d8; border-radius: 10px; padding: 10px; resize: vertical; font-size: 13px; outline: none; }
.email-compose textarea:focus { border-color: rgba(77,166,255,0.3); }
.email-log { font-size: 12px; padding: 6px 10px; border-radius: 6px; }
.email-log.success { color: #27ae60; background: rgba(39,174,96,0.08); }
.email-log.error { color: #e74c3c; background: rgba(231,76,60,0.08); }
.email-template { width: 180px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.email-template h4 { color: #c0c8d8; margin: 0; font-size: 14px; }
.email-template select { padding: 8px; background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #c0c8d8; font-size: 13px; outline: none; }
.template-preview { flex: 1; font-size: 12px; color: #6a7488; padding: 8px; background: rgba(10,14,20,0.3); border-radius: 8px; }

/* RCS短信子面板 */
.rcs-layout { display: flex; gap: 14px; flex: 1; overflow: hidden; }
.rcs-device, .rcs-numbers, .rcs-send { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rcs-device h4, .rcs-numbers h4, .rcs-send h4 { color: #c0c8d8; margin: 0; font-size: 14px; }
.rcs-status { padding: 10px; background: rgba(10,14,20,0.4); border-radius: 8px; font-size: 13px; color: #929aaa; }
.rcs-btn { padding: 8px 14px; background: rgba(77,166,255,0.1); color: #4da6ff; border: 1px solid rgba(77,166,255,0.2); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.rcs-btn:hover { background: rgba(77,166,255,0.18); }
.rcs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rcs-btn.secondary { background: rgba(255,255,255,0.04); color: #929aaa; border-color: rgba(255,255,255,0.08); }
.rcs-hint { font-size: 11px; color: #5a6478; margin: 0; line-height: 1.5; }
.rcs-numbers textarea, .rcs-send textarea { flex: 1; min-height: 100px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); color: #c0c8d8; border-radius: 10px; padding: 10px; resize: vertical; font-size: 13px; outline: none; }
.rcs-numbers textarea:focus, .rcs-send textarea:focus { border-color: rgba(77,166,255,0.3); }
.rcs-result { font-size: 12px; color: #929aaa; padding: 6px; background: rgba(10,14,20,0.4); border-radius: 6px; white-space: pre-wrap; }
.rcs-send-btn { padding: 10px; background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; }
.rcs-send-btn:hover { opacity: 0.9; }
.rcs-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-layout-dark {
  display: flex; flex: 1; gap: 16px; overflow: hidden; color: #e0e0e0;
}
.cc-sidebar-dark {
  width: 260px; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 20px; flex-shrink: 0;
}
.cc-type-selector { display: flex; gap: 8px; }
.cc-type-btn-dark {
  flex: 1; padding: 8px 4px; border: 1px solid rgba(255,255,255,0.1); background: transparent;
  color: #8a94a8; border-radius: 8px; font-size: 13px; cursor: pointer; text-align: center;
}
.cc-type-btn-dark.active { background: #4da6ff; color: white; border-color: #4da6ff; }
.cc-config-dark { display: flex; flex-direction: column; gap: 8px; }
.cc-config-dark label { font-size: 12px; color: #6a7488; font-weight: 600; margin-bottom: 2px; }
.cc-config-dark select {
  width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 13px; outline: none;
}
.cc-config-dark select option { background: #1a1e2a; color: #c0c8d8; }
.generate-btn-dark {
  background: #27ae60; color: white; border: none; padding: 12px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.generate-btn-dark:hover { background: #219a52; }

.cc-editor-dark {
  flex: 1; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.cc-editor-content { display: none; flex-direction: column; gap: 16px; flex: 1; }
.cc-editor-content.active { display: flex; }
.cc-editor-header-dark {
  display: flex; justify-content: space-between; color: #c0c8d8; font-weight: 600; font-size: 14px;
}
.cc-word-count { font-size: 12px; color: #6a7488; }
.cc-editor-dark textarea {
  flex: 1; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px;
  background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 14px; resize: none;
  outline: none; font-family: inherit; min-height: 100px;
}
.cc-editor-dark textarea::placeholder { color: #5a6478; }

/* 邮件表单 */
.email-form-dark { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.email-row { display: flex; flex-direction: column; gap: 4px; }
.email-row label { font-size: 12px; color: #6a7488; }
.email-row input, .email-row select, .email-row textarea {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 13px; outline: none; font-family: inherit;
}
.email-row textarea { min-height: 60px; resize: vertical; }
.email-image-upload-dark { display: flex; align-items: center; gap: 12px; }
.upload-img-btn-dark {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 6px 12px; color: #8a94a8; cursor: pointer; font-size: 13px;
}
.upload-img-btn-dark:hover { border-color: #4da6ff; color: #4da6ff; }
.generate-email-btn-dark {
  background: #4da6ff; color: white; border: none; padding: 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.generate-email-btn-dark:hover { background: #3d8ce0; }
.email-result-dark { margin-top: 14px; }
.email-result-header-dark {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #ccc;
}
.email-result-actions button {
  background: none; border: 1px solid #4da6ff; color: #4da6ff;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-left: 8px;
}
.email-result-actions button:hover { background: rgba(77,166,255,0.1); }
.email-code-output-dark {
  width: 100%; height: 200px; font-family: 'Cascadia Code', monospace; font-size: 12px;
  padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,14,20,0.5); color: #e0e0e0; resize: vertical;
}

/* 结果卡片 */
.cc-results-dark {
  max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.cc-result-card-dark {
  background: rgba(20,25,36,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
  padding: 10px;
}
.result-title-dark { font-size: 12px; color: #6a7488; margin-bottom: 4px; }
.result-text-dark { color: #c0c8d8; white-space: pre-wrap; font-size: 13px; }
.result-actions button {
  background: none; border: none; color: #4da6ff; cursor: pointer; font-size: 12px; margin-right: 8px; margin-top: 6px;
}

/* 排期 */
.cc-publish-dark {
  width: 260px; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0;
}
.cc-publish-header-dark { color: #c0c8d8; font-weight: 700; font-size: 14px; }
.cc-calendar-placeholder {
  background: rgba(20,25,36,0.5); border-radius: 8px; padding: 10px; text-align: center;
  color: #6a7488; font-size: 13px;
}
.cc-scheduled-list { display: flex; flex-direction: column; gap: 6px; }
.scheduled-item-dark {
  display: flex; justify-content: space-between; padding: 6px 8px;
  background: rgba(20,25,36,0.5); border-radius: 6px; font-size: 12px; color: #b0b8c8;
}
.schedule-btn-dark {
  background: #4da6ff; color: white; border: none; padding: 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px; margin-top: auto;
}
.schedule-btn-dark:hover { background: #3d8ce0; }

/* ===== 计费系统面板（重制） ===== */
.billing-layout { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding: 20px 24px; gap: 20px; }
.billing-header { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: linear-gradient(135deg, rgba(77,166,255,0.12), rgba(108,92,231,0.06)); border: 1px solid rgba(77,166,255,0.12); border-radius: 14px; }
.billing-plan-badge { background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; padding: 6px 20px; border-radius: 20px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 14px rgba(77,166,255,0.25); }
.billing-days { color: #f1c40f; font-weight: 600; font-size: 14px; }
.billing-tabs { display: flex; gap: 6px; }
.billing-tab { padding: 9px 20px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: transparent; color: #8a94a8; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.billing-tab:hover { border-color: rgba(255,255,255,0.15); color: #c0c8d8; }
.billing-tab.active { background: rgba(77,166,255,0.1); border-color: #4da6ff; color: #4da6ff; }
.billing-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.billing-plan-card { background: rgba(18,22,32,0.7); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px 22px; text-align: center; transition: all 0.3s; display: flex; flex-direction: column; gap: 12px; }
.billing-plan-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.billing-plan-card.current { border-color: rgba(77,166,255,0.3); background: rgba(77,166,255,0.04); box-shadow: 0 0 32px rgba(77,166,255,0.06); }
.billing-plan-card h3 { color: #d0d6e0; font-size: 18px; margin: 0; }
.plan-price { font-size: 38px; font-weight: 800; color: #fff; margin: 4px 0; }
.billing-plan-card ul { list-style: none; text-align: left; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.billing-plan-card li { font-size: 13px; color: #929aaa; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.billing-plan-card li::before { content: '• '; color: #4da6ff; font-weight: 700; margin-right: 6px; }
.plan-btn-current { background: rgba(255,255,255,0.04); color: #6a7488; border: 1px solid rgba(255,255,255,0.08); padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: default; }
.plan-btn-upgrade { background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; border: none; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(77,166,255,0.25); }
.plan-btn-upgrade:hover { transform: scale(1.03); box-shadow: 0 6px 24px rgba(77,166,255,0.35); }
/* Whop 付款按钮（国际卡 / ACH） */
.plan-btn-whop { background: linear-gradient(135deg, #7b2ff7, #f107a3); color: white; border: none; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(123,47,247,0.3); white-space: nowrap; }
.plan-btn-whop:hover:not(:disabled) { transform: scale(1.03); box-shadow: 0 6px 24px rgba(123,47,247,0.4); }
.plan-btn-whop:disabled { opacity: 0.5; cursor: not-allowed; }
.billing-loading { color: #6a7488; padding: 60px; text-align: center; font-size: 16px; }
.billing-usage { display: flex; flex-direction: column; gap: 22px; padding: 10px 0; }
.usage-item { display: flex; align-items: center; gap: 14px; }
.usage-item-label { width: 90px; font-size: 13px; color: #c0c8d8; font-weight: 600; flex-shrink: 0; }
.usage-item-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.usage-item-fill { height: 100%; border-radius: 4px; transition: width 0.5s; background: linear-gradient(90deg, #4da6ff, #6c5ce7); }
.usage-item-fill.warn { background: linear-gradient(90deg, #e67e22, #f39c12); }
.usage-item-fill.danger { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.usage-item-val { font-size: 12px; color: #6a7488; width: 90px; text-align: right; flex-shrink: 0; }
.billing-invoice-table { width: 100%; border-collapse: collapse; }
.billing-invoice-table th, .billing-invoice-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; text-align: left; }
.billing-invoice-table th { color: #6a7488; font-weight: 600; font-size: 12px; }
.billing-invoice-table td { color: #b0b8c8; }
.billing-invoice-status { padding: 3px 10px; border-radius: 10px; font-size: 12px; }
.billing-invoice-status.paid { background: rgba(39,174,96,0.12); color: #27ae60; }
.billing-invoice-status.unpaid { background: rgba(231,76,60,0.12); color: #e74c3c; }
.billing-empty { text-align: center; padding: 30px; color: #6a7488; }
.billing-payment { display: flex; flex-direction: column; gap: 14px; }
.payment-method-card { display: flex; align-items: center; gap: 16px; background: rgba(20,25,36,0.6); padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s; }
.payment-method-card:hover { border-color: rgba(77,166,255,0.2); }
.payment-icon { font-size: 36px; }
.payment-info { flex: 1; }
.payment-info strong { color: #d0d6e0; display: block; margin-bottom: 2px; font-size: 15px; }
.payment-info p { color: #6a7488; font-size: 12px; margin: 0; }
.payment-status-on { color: #27ae60; font-size: 12px; font-weight: 600; background: rgba(39,174,96,0.1); padding: 4px 12px; border-radius: 10px; }
.payment-status-off { color: #e67e22; font-size: 12px; font-weight: 600; background: rgba(230,126,34,0.1); padding: 4px 12px; border-radius: 10px; }
.payment-note { color: #5a6478; font-size: 12px; padding-left: 52px; }
.pay-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.pay-modal { background: #1a1e2a; border-radius: 20px; padding: 36px 32px; text-align: center; min-width: 340px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.pay-modal h3 { color: #d0d6e0; margin: 0 0 20px; font-size: 18px; }
.pay-loading { color: #6a7488; padding: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pay-loading::before { content: '⏳'; font-size: 20px; animation: spin 1.5s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-error { color: #e74c3c; padding: 12px; background: rgba(231,76,60,0.1); border-radius: 10px; margin-bottom: 12px; font-size: 14px; }
.pay-qr-wrap { margin: 16px 0; }
.pay-qr-wrap img { width: 200px; height: 200px; border-radius: 16px; background: white; padding: 10px; border: 1px solid rgba(0,0,0,0.1); }
.pay-qr-wrap p { color: #b0b8c8; margin-top: 14px; font-size: 14px; }
.pay-amount { color: #4da6ff; font-weight: 800; }
.pay-hint { color: #5a6478; font-size: 12px; margin-top: 4px; }
.pay-close-btn { margin-top: 20px; padding: 10px 40px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: transparent; color: #8a94a8; font-size: 14px; cursor: pointer; transition: all 0.15s; }
.pay-close-btn:hover { border-color: rgba(255,255,255,0.2); color: #c0c8d8; }
/* 余额面板 */
.billing-balance { display: flex; flex-direction: column; gap: 16px; }
.balance-card { background: linear-gradient(135deg, rgba(46,204,113,0.12), rgba(39,174,96,0.06)); border: 1px solid rgba(46,204,113,0.15); border-radius: 14px; padding: 24px; text-align: center; }
.balance-label { font-size: 13px; color: #6a7488; margin-bottom: 6px; }
.balance-amount { font-size: 42px; font-weight: 800; color: #27ae60; }
.balance-topup h4 { color: #c0c8d8; margin: 0 0 10px; font-size: 14px; }
.topup-options { display: flex; gap: 8px; margin-bottom: 12px; }
.topup-chip { padding: 8px 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: transparent; color: #8a94a8; cursor: pointer; font-size: 14px; font-weight: 600; }
.topup-chip.active { border-color: #27ae60; color: #27ae60; background: rgba(39,174,96,0.08); }
.topup-custom { display: flex; gap: 10px; align-items: center; }
.topup-custom input { width: 100px; padding: 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 15px; text-align: center; outline: none; }

/* ===== 记账报税面板 ===== */
.billing-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  overflow-y: auto;
}

/* 当前套餐 + 用量 */
.billing-current-plan {
  display: flex;
  gap: 16px;
}
.plan-card {
  flex: 1;
  background: linear-gradient(135deg, #2c7fd4, #219a52);
  color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(44, 127, 212, 0.25);
  display: flex;
  flex-direction: column;
}
.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.plan-header h3 {
  font-size: 16px;
}
.plan-badge {
  padding: 3px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.plan-price {
  font-size: 36px;
  font-weight: 700;
  margin: 8px 0;
}
.plan-price span {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.8;
}
.plan-desc {
  font-size: 13px;
  opacity: 0.9;
  margin: 8px 0 14px;
  line-height: 1.5;
}
.upgrade-btn {
  margin-top: auto;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #2c7fd4;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.upgrade-btn:hover { background: #e8f0fa; }

.usage-summary {
  flex: 1;
  background: rgba(18, 22, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.usage-item label {
  display: block;
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 4px;
}
.usage-item span {
  font-size: 12px;
  color: #8a94a8;
}
.usage-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.usage-fill {
  height: 100%;
  background: #4da6ff;
  border-radius: 4px;
  transition: width 0.5s;
}

/* 套餐对比 */
.billing-plans-table h4 {
  font-size: 15px;
  color: #d0d6e0;
  margin-bottom: 10px;
}
.highlight-col {
  background: rgba(77, 166, 255, 0.06);
}
.plan-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #6a7488;
}
.plan-select-btn {
  padding: 5px 16px;
  border: none;
  border-radius: 6px;
  background: #4da6ff;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.plan-select-btn:hover { background: #3d8ce0; }

/* 底部：支付 + 账单 */
.billing-bottom {
  display: flex;
  gap: 16px;
}
.payment-methods,
.invoice-history {
  flex: 1;
  background: rgba(18, 22, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}
.payment-methods h4,
.invoice-history h4 {
  font-size: 14px;
  color: #d0d6e0;
  margin-bottom: 10px;
}
.pm-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pm-item {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.pm-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.pm-item.selected {
  background: rgba(77, 166, 255, 0.12);
  border-color: #4da6ff;
  color: #4da6ff;
}
.add-pm-btn {
  padding: 6px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #6a7488;
  font-size: 12px;
  cursor: pointer;
}
.add-pm-btn:hover {
  border-color: #4da6ff;
  color: #4da6ff;
}
.status-paid {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(39, 174, 96, 0.15);
  color: #2ecc71;
  font-size: 11px;
}
.download-invoice {
  padding: 3px 12px;
  border: 1px solid #4da6ff;
  border-radius: 6px;
  background: transparent;
  color: #4da6ff;
  font-size: 12px;
  cursor: pointer;
}
.download-invoice:hover {
  background: rgba(77, 166, 255, 0.1);
}

/* ===== 记账报税面板 ===== */
.tax-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  overflow-y: auto;
}

/* 统计卡片 */
.tax-stats-row {
  display: flex;
  gap: 14px;
}
.tax-stat-card {
  flex: 1;
  background: rgba(18, 22, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.tax-stat-card .stat-label {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 6px;
}
.tax-stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #d0d6e0;
}
.tax-stat-card .stat-value.positive { color: #2ecc71; }
.tax-stat-card .stat-value.negative { color: #e74c3c; }
.tax-stat-card .stat-sub {
  font-size: 12px;
  color: #6a7488;
  margin-top: 4px;
}

/* 主体两栏 */
.tax-main {
  flex: 1;
  display: flex;
  gap: 14px;
  overflow: hidden;
}

/* 左侧财务流水 */
.tax-journal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tax-journal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tax-journal-header h4 {
  font-size: 15px;
  color: #d0d6e0;
}
.journal-actions {
  display: flex;
  gap: 8px;
}
.journal-actions button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.journal-actions button:hover {
  border-color: #4da6ff;
  color: #4da6ff;
}
.tax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tax-table th {
  text-align: left;
  padding: 0;
}
.tax-table td {
  padding: 0;
}
.income-cell { color: #2ecc71; }
.expense-cell { color: #e74c3c; }
.tax-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 12px;
  color: #6a7488;
}
.tax-pagination button {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.page-num { font-weight: 600; color: #d0d6e0; }

/* 右侧报税自动化 */
.tax-auto-section {
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex-shrink: 0;
}
.tax-auto-card {
  background: rgba(18, 22, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}
.tax-auto-card h4 {
  font-size: 14px;
  color: #d0d6e0;
  margin-bottom: 4px;
}
.tax-auto-card p {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 10px;
}
.tax-auto-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tax-auto-form label {
  font-size: 11px;
  color: #6a7488;
  font-weight: 500;
}
.tax-auto-form input,
.tax-auto-form select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.4);
  color: #c0c8d8;
  font-size: 13px;
  outline: none;
}
.tax-auto-form select option { background: #1a1e2a; color: #c0c8d8; }
.tax-checkboxes {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: #b0b8c8;
}
.tax-checkboxes label { cursor: pointer; }
.auto-btn {
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #27ae60;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.auto-btn:hover { background: #219a52; }
.auto-btn.secondary {
  background: #4da6ff;
}
.auto-btn.secondary:hover {
  background: #3d8ce0;
}
.captcha-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.captcha-btn:hover { background: rgba(255, 255, 255, 0.12); color: #c0c8d8; }

/* 自动化日志 */
.tax-log-window {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}
.tax-log-window h5 {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 6px;
}
.tax-log-content {
  flex: 1;
  overflow-y: auto;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  color: #8a94a8;
  line-height: 1.7;
}

/* ===== 配置中心面板 ===== */
.config-layout {
  display: flex;
  flex: 1;
  gap: 0;
  overflow: hidden;
}
.config-sidebar {
  width: 220px;
  background: rgba(18, 22, 32, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.config-nav-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 13px;
  color: #8a94a8;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.config-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #c0c8d8;
}
.config-nav-item.active {
  background: rgba(77, 166, 255, 0.1);
  color: #4da6ff;
  border-left-color: #4da6ff;
}

.config-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.config-section h3 {
  font-size: 18px;
  color: #d0d6e0;
  margin-bottom: 14px;
}
.section-desc {
  font-size: 13px;
  color: #6a7488;
  margin-bottom: 14px;
}

/* 智能体配置卡片 */
.agent-config-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-config-card {
  background: rgba(20, 25, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}
.agent-config-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.agent-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.agent-config-header strong {
  flex: 1;
  color: #d0d6e0;
  font-size: 14px;
}
.switch {
  font-size: 12px;
  color: #8a94a8;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.agent-config-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-config-body label {
  font-size: 11px;
  color: #6a7488;
  font-weight: 600;
}
.agent-config-body input,
.agent-config-body select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.4);
  color: #c0c8d8;
  font-size: 13px;
  outline: none;
}
.agent-config-body select option {
  background: #1a1e2a;
  color: #c0c8d8;
}
.checkbox-group {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: #b0b8c8;
}

/* 渠道列表 */
.channel-category-title {
  font-size: 12px; font-weight: 700; color: #6a7488;
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(20, 25, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 13px;
  color: #c0c8d8;
}
.channel-item span:first-child { flex: 1; }
.channel-item button {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.channel-item button:hover { border-color: #4da6ff; color: #4da6ff; }

/* 状态标签 */
.status-tag {
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}
.status-tag.connected { background: rgba(39, 174, 96, 0.15); color: #2ecc71; }
.status-tag.disconnected { background: rgba(231, 76, 60, 0.12); color: #e74c3c; }

/* 社交媒体 */
.social-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.social-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(20, 25, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.social-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-icon { font-size: 20px; }
.social-info strong {
  display: block;
  font-size: 13px;
  color: #d0d6e0;
}
.social-detail {
  font-size: 11px;
  color: #6a7488;
}
.social-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-actions button,
.connect-btn {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.social-actions button:hover,
.connect-btn:hover { border-color: #4da6ff; color: #4da6ff; }
.connect-btn {
  border-color: #4da6ff;
  color: #4da6ff;
}
.add-social-btn,
.add-role-btn {
  padding: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #6a7488;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.add-social-btn:hover,
.add-role-btn:hover { border-color: #4da6ff; color: #4da6ff; }

/* 权限表 */
.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.edit-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.edit-btn:hover { border-color: #4da6ff; color: #4da6ff; }

/* 通用设置 */
.general-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.general-form label {
  font-size: 12px;
  color: #6a7488;
  font-weight: 600;
  margin-top: 4px;
}
.general-form select,
.general-form input {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.4);
  color: #c0c8d8;
  font-size: 13px;
  outline: none;
}
.general-form select option {
  background: #1a1e2a;
  color: #c0c8d8;
}

/* ===== 个人中心面板 ===== */
.profile-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  overflow-y: auto;
}

/* 头部卡片 */
.profile-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #2c7fd4, #6c5ce7);
  border-radius: 14px;
  padding: 24px 28px;
  color: #fff;
}
.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.profile-name-role h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
.profile-name-role span {
  font-size: 13px;
  opacity: 0.8;
}
.profile-stats {
  display: flex;
  gap: 28px;
}
.profile-stat-item {
  text-align: center;
}
.profile-stat-item span {
  display: block;
  font-size: 12px;
  opacity: 0.7;
}
.profile-stat-item strong {
  font-size: 20px;
}
.profile-stat-item strong.unread { color: #ffeaa7; }

/* 标签切换 */
.profile-update-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(18, 22, 32, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.profile-tabs {
  display: flex;
  gap: 4px;
  background: rgba(18, 22, 32, 0.4);
  padding: 6px;
  border-radius: 10px;
}
.profile-tab {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-tab:hover { color: #c0c8d8; }
.profile-tab.active {
  background: rgba(77, 166, 255, 0.15);
  color: #4da6ff;
}

/* 表单 */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6a7488;
  margin-bottom: 4px;
}
.form-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.4);
  color: #d0d6e0;
  font-size: 13px;
  outline: none;
}
.form-group input:focus { border-color: #4da6ff; }
.mfa-btn {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
}
.mfa-btn:hover { border-color: #4da6ff; color: #4da6ff; }
.save-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: #4da6ff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}
.save-btn:hover { background: #3d8ce0; }

/* 团队成员表 */
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.team-header h4 { font-size: 15px; color: #d0d6e0; }
.invite-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: #4da6ff;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.invite-btn:hover { background: #3d8ce0; }
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.member-status {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
}
.member-status.active { background: rgba(39, 174, 96, 0.15); color: #2ecc71; }
.member-status.inactive { background: rgba(189, 195, 199, 0.12); color: #95a5a6; }
.role-change-btn, .resend-btn {
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.role-change-btn:hover, .resend-btn:hover { border-color: #4da6ff; color: #4da6ff; }

/* 通知 */
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(20, 25, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 13px;
  color: #b0b8c8;
}
.notification-item.unread {
  border-left: 3px solid #4da6ff;
}
.notif-time { font-size: 11px; color: #6a7488; }
.mark-all-read {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #8a94a8;
  font-size: 12px;
  cursor: pointer;
}
.mark-all-read:hover { border-color: #4da6ff; color: #4da6ff; }

/* 操作历史 */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* 偏好设置 */
.pref-group {
  background: rgba(20, 25, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.pref-group h4 {
  font-size: 14px;
  color: #d0d6e0;
  margin-bottom: 8px;
}
.pref-group label {
  display: block;
  font-size: 12px;
  color: #6a7488;
  margin: 8px 0 4px;
}
.pref-group select {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.4);
  color: #c0c8d8;
  font-size: 13px;
}
.pref-group select option { background: #1a1e2a; color: #c0c8d8; }
.pref-checkbox {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: #b0b8c8;
}
.pref-group p {
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 6px;
}
.shortcut-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shortcut-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(10, 14, 20, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: #b0b8c8;
}
.shortcut-list li button {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: transparent;
  color: #8a94a8;
  font-size: 11px;
  cursor: pointer;
}
.shortcut-list li button:hover { border-color: #e74c3c; color: #e74c3c; }

/* ===== 数字人直播面板 v2（横版布局） ===== */
.live-v2 { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 10px; overflow: hidden; }
.live-v2-mode { display: flex; gap: 6px; }
.lv2-mode-btn { flex: 1; padding: 8px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: #8a94a8; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; transition: all .15s; }
.lv2-mode-btn:hover { border-color: rgba(255,255,255,0.15); color: #c0c8d8; }
.lv2-mode-btn.active { background: rgba(77,166,255,0.1); border-color: #4da6ff; color: #4da6ff; }
.lv2-mode-btn .coming-soon { font-size: 10px; color: #e67e22; margin-left: 3px; }

/* 配置条（横排） */
.live-v2-config-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(20,24,36,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; flex-wrap: wrap; }
.lv2-cfg-item { display: flex; align-items: center; gap: 6px; }
.lv2-cfg-item label { font-size: 12px; color: #6a7488; white-space: nowrap; }
.lv2-cfg-item select, .lv2-cfg-item input { padding: 6px 10px; background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #c0c8d8; font-size: 12px; outline: none; }
.lv2-cfg-item input { width: 260px; }
.lv2-cfg-item select:focus, .lv2-cfg-item input:focus { border-color: rgba(77,166,255,0.3); }
.lv2-cost { margin-left: auto; font-size: 13px; color: #27ae60; font-weight: 600; white-space: nowrap; }

/* 直播画面 */
.live-v2-screen { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-height: 0; }
.live-v2-video-wrap { position: relative; width: 100%; max-width: 700px; aspect-ratio: 16/9; }
.live-v2-video-wrap canvas { width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.06); }
.live-v2-video-wrap .live-status-badge { position: absolute; top: 10px; left: 10px; color: white; padding: 3px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; }

/* 实时评论区（屏幕下方） */
.live-v2-chat { background: rgba(20,24,36,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 14px; height: calc(250px - 1.5cm); display: flex; flex-direction: column; }
.live-v2-chat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.live-v2-chat-head > span { color: #c0c8d8; font-weight: 700; font-size: 13px; }
.live-ai-settings-inline { display: flex; align-items: center; gap: 14px; }
.live-ai-settings-inline label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #929aaa; cursor: pointer; white-space: nowrap; }
.live-ai-settings-inline input[type="checkbox"] { accent-color: #4da6ff; transform: scale(1.0); }
.live-ai-settings-inline input[type="number"] { background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; color: #c0c8d8; padding: 1px 4px; font-size: 12px; outline: none; text-align: center; }
.live-v2-chat-msgs { flex: 1; overflow-y: auto; font-size: 13px; color: #b0b8c8; }
.live-v2-chat-msgs .chat-msg { margin-bottom: 4px; }
.live-v2-chat-msgs .chat-msg .user { color: #4da6ff; font-weight: 600; }
.admin-layout { display: flex; flex: 1; overflow: hidden; }
.admin-sidebar { width: 200px; background: rgba(18,22,32,0.6); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; padding-top: 8px; flex-shrink: 0; }
.admin-menu-item { padding: 12px 20px; cursor: pointer; color: #8a94a8; font-size: 14px; transition: all 0.2s; }
.admin-menu-item:hover { background: rgba(255,255,255,0.04); color: #c0c8d8; }
.admin-menu-item.active { background: rgba(77,166,255,0.08); color: #4da6ff; border-left: 3px solid #4da6ff; }
.admin-content { flex: 1; padding: 20px 24px; overflow-y: auto; }
.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section h3 { color: #c0c8d8; margin: 0 0 14px; font-size: 16px; }
.admin-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.admin-table th { background: rgba(255,255,255,0.04); color: #6a7488; padding: 10px 12px; text-align: left; font-weight: 600; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: #b0b8c8; }
.admin-table input[type="checkbox"] { transform: scale(1.1); accent-color: #4da6ff; }
.admin-btn-add, .admin-btn-save { background: #4da6ff; color: white; border: none; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 8px; }
.admin-btn-add:hover, .admin-btn-save:hover { background: #3d8ce0; }
.admin-btn-edit, .admin-btn-del { background: none; border: 1px solid rgba(255,255,255,0.12); color: #b0b8c8; padding: 4px 12px; border-radius: 6px; cursor: pointer; margin-right: 6px; font-size: 12px; }
.admin-btn-edit:hover { border-color: #4da6ff; color: #4da6ff; }
.admin-btn-del { border-color: #e74c3c; color: #e74c3c; }
.admin-btn-del:hover { background: rgba(231,76,60,0.1); }
.admin-empty { text-align: center; padding: 30px; color: #6a7488; }

/* ===== 货运面板 ===== */
.freight-layout-v2 { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding: 10px; }
.freight-body { flex: 1; overflow-y: auto; }
.freight-call { flex: 1; overflow-y: auto; padding-right: 10px; }
.freight-call h3 { color: #c0c8d8; margin-bottom: 14px; font-size: 16px; }
.freight-form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; gap: 12px; }
.form-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.form-field.full { flex: 2; }
.form-field label { font-size: 12px; color: #6a7488; font-weight: 500; }
.form-field input, .form-field select { padding: 9px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 13px; outline: none; font-family: inherit; }
.freight-submit-btn { padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.freight-submit-btn:hover { opacity: 0.9; }
.freight-order-status { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(39,174,96,0.1); color: #27ae60; font-size: 14px; }

.freight-cards { width: 360px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; overflow-y: auto; }
.freight-cards-header { display: flex; justify-content: space-between; align-items: center; }
.freight-cards-header h3 { color: #c0c8d8; font-size: 16px; margin: 0; }
.freight-cards-actions { display: flex; align-items: center; gap: 10px; }
.freight-refresh-hint { font-size: 11px; color: #5a6478; }
.freight-apply-btn { padding: 6px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: transparent; color: #8a94a8; font-size: 13px; cursor: pointer; }
.freight-apply-btn:hover { border-color: #4da6ff; color: #4da6ff; }

.freight-apply-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: rgba(18,22,32,0.6); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.freight-apply-form input { flex: 1; min-width: 100px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(10,14,20,0.5); color: #e0e0e0; font-size: 13px; outline: none; }
.freight-apply-form button { padding: 8px 16px; border: none; border-radius: 6px; background: #4da6ff; color: white; cursor: pointer; font-size: 13px; }
.freight-apply-form .cancel-btn { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #8a94a8; }

.freight-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, 189px); gap: 10px; justify-content: center; }
.freight-card { width: 189px; height: 113px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; overflow: hidden; }
.freight-card:hover { border-color: rgba(77,166,255,0.15); }
.freight-card-avatar { font-size: 24px; }
.freight-card-info { width: 100%; overflow: hidden; }
.freight-card-name { color: #d0d6e0; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freight-card-contact { color: #6a7488; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freight-card-route { color: #4da6ff; font-size: 10px; }
.freight-card-rating { color: #f1c40f; font-size: 10px; }
.freight-card-desc { color: #6a7488; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.freight-card.expanded { height: auto; min-height: 113px; }
.freight-card-detail { margin-top: 4px; font-size: 11px; color: #b0b8c8; }

/* ===== 登录/注册 ===== */
.auth-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0c14 url('./bg-BQUf0OiK.jpg') center/cover no-repeat fixed;
}
.auth-card {
  width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(18, 22, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #6a7488;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.auth-tab:hover { color: #a0a8b8; }
.auth-tab.active {
  color: #4da6ff;
  border-bottom-color: #4da6ff;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6a7488;
  margin-bottom: 4px;
}
.auth-form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.5);
  color: #d0d6e0;
  font-size: 14px;
  outline: none;
}
.auth-form-group input:focus { border-color: #4da6ff; }
.auth-form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #8a94a8;
}
.forgot-link { color: #4da6ff; font-size: 12px; }
.auth-btn {
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3498db, #2ecc71);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth-btn:hover { opacity: 0.9; }
.auth-social {
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-social span {
  display: block;
  font-size: 12px;
  color: #6a7488;
  margin-bottom: 8px;
}
.social-icons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.social-icon-btn {
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: transparent;
  color: #8a94a8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.social-icon-btn:hover { border-color: #4da6ff; color: #4da6ff; }
.auth-agreement {
  font-size: 12px;
  color: #6a7488;
  text-align: center;
  margin-top: 8px;
}
.auth-agreement a { color: #4da6ff; }

/* 退出登录按钮 */
.logout-btn {
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.logout-btn:hover {
  background: #e74c3c;
  color: #fff;
}

/* 静态工具卡片 */
.tool-card-static {
  margin-top: 8px;
  background: rgba(77, 166, 255, 0.08);
  border: 1px solid rgba(77, 166, 255, 0.15);
  border-radius: 8px;
  padding: 10px;
}

/* ---- 右侧工作流面板 ---- */
.dispatch-workflow-panel {
  width: 240px;
  background: #fafbfc;
  border-left: 1px solid #ecf0f1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex-shrink: 0;
}
.workflow-header {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 15px;
}
.workflow-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflow-item {
  background: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.wf-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.wf-status.running {
  background: #e6f9ee;
  color: #27ae60;
}
.wf-status.waiting {
  background: #fef5e7;
  color: #e67e22;
}
.wf-status.wf-done {
  background: rgba(39,174,96,0.1);
  color: #2ecc71;
}
.workflow-actions {
  margin-top: 16px;
}
.wf-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 0;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.wf-btn:hover {
  background: #2980b9;
}

/* ===== 工作流引擎面板 ===== */
.wf-engine-layout { display: flex; flex: 1; overflow: hidden; gap: 14px; padding: 10px 6px; }
.wf-engine-left { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 12px; gap: 10px; overflow: hidden; }
.wf-engine-header { font-size: 15px; font-weight: 700; color: #d0d6e0; padding: 2px 4px; }
.wf-new-task { display: flex; flex-direction: column; gap: 8px; }
.wf-new-task input, .wf-new-task textarea {
  width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 13px; outline: none; box-sizing: border-box; resize: none;
  font-family: inherit;
}
.wf-new-task input:focus, .wf-new-task textarea:focus { border-color: rgba(77,166,255,0.35); }
.wf-create-btn {
  background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; border: none;
  padding: 9px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.wf-create-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wf-task-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.wf-task-item {
  padding: 10px 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
  cursor: pointer; transition: all 0.15s; background: rgba(10,14,20,0.3);
}
.wf-task-item:hover { border-color: rgba(255,255,255,0.14); }
.wf-task-item.active { border-color: rgba(77,166,255,0.35); background: rgba(77,166,255,0.07); }
.wf-task-item-title { font-size: 13px; color: #c0c8d8; font-weight: 600; margin-bottom: 6px; word-break: break-all; }
.wf-task-item-meta { display: flex; align-items: center; justify-content: space-between; }
.wf-task-status { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,0.06); color: #8a94a8; }
.wf-task-status.planning { background: rgba(243,156,18,0.12); color: #f39c12; }
.wf-task-status.review { background: rgba(155,89,182,0.15); color: #9b59b6; }
.wf-task-status.done { background: rgba(39,174,96,0.12); color: #2ecc71; }
.wf-task-status.running { background: rgba(52,152,219,0.15); color: #3498db; }
.wf-task-del { background: none; border: none; color: #6a7488; cursor: pointer; font-size: 13px; }
.wf-task-del:hover { color: #e74c3c; }
.wf-engine-empty { text-align: center; padding: 24px 8px; color: #5a6478; font-size: 12px; }
.wf-engine-hint { font-size: 11px; color: #5a6478; padding: 8px; border-top: 1px solid rgba(255,255,255,0.05); line-height: 1.6; }

.wf-engine-right { flex: 1; overflow-y: auto; background: rgba(18,22,32,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 18px 20px; }
.wf-engine-empty-lg { text-align: center; padding: 80px 20px; color: #8a94a8; font-size: 15px; }
.wf-task-detail { display: flex; flex-direction: column; gap: 12px; }
.wf-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-detail-head h3 { color: #d0d6e0; margin: 0 0 6px; font-size: 18px; }
.wf-detail-desc { color: #8a94a8; font-size: 13px; line-height: 1.6; }
.wf-detail-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wf-btn-plan, .wf-btn-run {
  padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; color: white;
}
.wf-btn-plan { background: linear-gradient(135deg, #f39c12, #e67e22); }
.wf-btn-run { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.wf-btn-plan:disabled, .wf-btn-run:disabled { opacity: 0.5; cursor: not-allowed; }
.wf-review-badge { font-size: 12px; color: #9b59b6; font-weight: 600; }
.wf-msg { padding: 10px 14px; border-radius: 8px; background: rgba(77,166,255,0.08); border: 1px solid rgba(77,166,255,0.15); color: #b0c8e8; font-size: 13px; }
.wf-steps { display: flex; flex-direction: column; gap: 10px; }
.wf-step { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 12px 14px; background: rgba(10,14,20,0.35); }
.wf-step.running { border-color: rgba(52,152,219,0.4); box-shadow: 0 0 14px rgba(52,152,219,0.08); }
.wf-step.approved { border-color: rgba(39,174,96,0.35); }
.wf-step.rejected { border-color: rgba(231,76,60,0.35); }
.wf-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wf-step-num {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(77,166,255,0.15); color: #4da6ff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.wf-step-title { color: #c0c8d8; font-weight: 600; font-size: 13px; flex: 1; }
.wf-step-status { font-size: 11px; color: #8a94a8; }
.wf-step-status.running { color: #3498db; }
.wf-step-detail { color: #6a7488; font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
.wf-step-output {
  background: rgba(20,25,36,0.7); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px;
  padding: 10px 12px; color: #b0c8d8; font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.wf-step-review { display: flex; gap: 8px; margin-top: 10px; }
.wf-review-ok, .wf-review-no {
  padding: 6px 14px; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wf-review-ok { background: rgba(39,174,96,0.15); color: #2ecc71; }
.wf-review-no { background: rgba(231,76,60,0.12); color: #e74c3c; }
.wf-review-ok:hover { background: rgba(39,174,96,0.25); }
.wf-review-no:hover { background: rgba(231,76,60,0.2); }

/* ===== AiToEarn 真实发布 ===== */
.pub-cfg-bar { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.pub-cfg-bar select, .pub-cfg-bar input {
  padding: 7px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none;
}
.pub-cfg-bar input { flex: 1; min-width: 220px; }
.pub-cfg-save { background: linear-gradient(135deg, #4da6ff, #6c5ce7); color: white; border: none; border-radius: 8px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pub-cfg-save:disabled { opacity: .5; }
.pub-cfg-ok { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 12px; background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.2); border-radius: 8px; color: #2ecc71; font-size: 12px; flex-wrap: wrap; }
.pub-cfg-reset { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.15); color: #8a94a8; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.pub-platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; }
.pub-platform-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: rgba(10,14,20,0.3); font-size: 12px; }
.pub-platform-item.sel { border-color: rgba(77,166,255,0.4); background: rgba(77,166,255,0.08); }
.pub-platform-item label { display: flex; align-items: center; gap: 5px; color: #b0b8c8; cursor: pointer; }
.pub-platform-item input { accent-color: #4da6ff; }
.pub-auth-ok { color: #2ecc71; font-size: 12px; font-weight: 700; }
.pub-auth-none { color: #5a6478; font-size: 11px; }
.pub-auth-btn { background: rgba(243,156,18,0.15); color: #f39c12; border: 1px solid rgba(243,156,18,0.3); border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.pub-auth-btn:hover { background: rgba(243,156,18,0.25); }
.pub-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pub-history { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; }
.pub-history-title { font-size: 12px; color: #8a94a8; margin-bottom: 6px; font-weight: 600; }
.pub-history-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #b0b8c8; padding: 4px 0; }
.pub-st { padding: 1px 8px; border-radius: 8px; font-size: 11px; }
.pub-st-ok { background: rgba(39,174,96,0.12); color: #2ecc71; }
.pub-st-wait { background: rgba(243,156,18,0.12); color: #f39c12; }

/* ===== 发布素材上传 ===== */
.pub-media-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.pub-media-btn { background: rgba(77,166,255,0.12); color: #4da6ff; border: 1px solid rgba(77,166,255,0.3); border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pub-media-btn:disabled { opacity: .5; cursor: not-allowed; }
.pub-media-list { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-media-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(10,14,20,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; font-size: 12px; color: #b0b8c8; }
.pub-media-del { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 12px; padding: 0 2px; }
.pub-media-empty { font-size: 11px; color: #5a6478; }

/* ===== Facebook 直发面板 ===== */
.fb-pub { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; overflow-y: auto; }
.fb-auth { display: flex; flex-direction: column; gap: 8px; }
.fb-auth-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-oauth-btn { background: linear-gradient(135deg, #1877f2, #0e5fc7); color: white; border: none; border-radius: 10px; padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; }
.fb-oauth-btn:disabled { opacity: .5; }
.fb-or { color: #6a7488; font-size: 12px; }
.fb-auth-bar input { flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; }
.fb-token-btn { background: rgba(255,255,255,0.08); color: #c0c8d8; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 14px; font-size: 12px; cursor: pointer; }
.fb-auth-ok { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.2); border-radius: 8px; color: #2ecc71; font-size: 12px; }
.fb-refresh { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.15); color: #8a94a8; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.fb-page-list { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-page-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; font-size: 13px; color: #b0b8c8; background: rgba(10,14,20,0.3); }
.fb-page-item.sel { border-color: #1877f2; background: rgba(24,119,242,0.12); color: #fff; }
.fb-page-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.fb-page-avatar-fallback { display: flex; align-items: center; justify-content: center; background: rgba(24,119,242,0.2); font-size: 14px; }
.fb-no-page { color: #6a7488; font-size: 12px; padding: 8px; }
.fb-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
.fb-type-tabs { display: flex; gap: 6px; }
.fb-type-tab { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: transparent; color: #8a94a8; font-size: 12px; font-weight: 600; cursor: pointer; }
.fb-type-tab.active { background: rgba(24,119,242,0.12); border-color: #1877f2; color: #4da6ff; }
.fb-message { width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 13px; resize: vertical; outline: none; box-sizing: border-box; font-family: inherit; }
.fb-input { width: 100%; padding: 9px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none; box-sizing: border-box; }
.fb-media-row { display: flex; flex-direction: column; gap: 8px; }
.fb-file-btn { background: rgba(24,119,242,0.12); color: #4da6ff; border: 1px solid rgba(24,119,242,0.3); border-radius: 8px; padding: 8px 14px; font-size: 12px; cursor: pointer; align-self: flex-start; }
.fb-img-preview { max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }
.fb-submit-row { display: flex; align-items: center; gap: 12px; }
.fb-submit { background: linear-gradient(135deg, #1877f2, #0e5fc7); color: white; border: none; border-radius: 10px; padding: 10px 26px; font-size: 13px; font-weight: 700; cursor: pointer; }
.fb-submit:disabled { opacity: .5; }

.fb-reauth { background: none; border: 1px solid rgba(77,166,255,0.3); color: #4da6ff; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.fb-disconnect { background: none; border: 1px solid rgba(231,76,60,0.35); color: #e74c3c; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.fb-disconnect:hover { background: rgba(231,76,60,0.1); }

.th-result { background: rgba(10,14,20,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px; font-size: 12px; color: #b0c8d8; white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow: auto; }

.cs-not-connected { padding: 10px; margin: 8px; border: 1px solid rgba(231,76,60,0.3); background: rgba(231,76,60,0.08); border-radius: 8px; color: #e74c3c; font-size: 12px; line-height: 1.8; }
.cs-error { padding: 6px 10px; background: rgba(231,76,60,0.1); border-radius: 6px; color: #e74c3c; font-size: 11px; margin-bottom: 6px; }

.erp-add-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; padding: 10px; background: rgba(10,14,20,0.4); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.erp-add-form input, .erp-add-form select { padding: 7px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none; }
.erp-add-msg { font-size: 12px; color: #4da6ff; }

/* ===== 工作流引擎 v2（检查点/自学习/自进化） ===== */
.wf-new-row { display: flex; gap: 6px; align-items: center; }
.wf-skill-picker { flex: 1; padding: 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none; }
.wf-lessons { margin: 10px 0; padding: 10px 12px; background: rgba(155,89,182,0.08); border: 1px solid rgba(155,89,182,0.15); border-radius: 8px; }
.wf-lessons-title { font-size: 12px; color: #b39ddb; font-weight: 600; margin-bottom: 6px; }
.wf-lesson-item { font-size: 12px; color: #9b8bb8; line-height: 1.6; }
.wf-skill-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; padding: 10px 12px; background: rgba(46,204,113,0.06); border: 1px solid rgba(46,204,113,0.15); border-radius: 8px; }
.wf-skill-form input { flex: 1; min-width: 140px; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 12px; outline: none; }
.wf-skill-cancel { background: none; border: 1px solid rgba(255,255,255,0.12); color: #8a94a8; padding: 8px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.wf-reject-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 900; display: flex; align-items: center; justify-content: center; }
.wf-reject-box { background: #1a1e2a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px; width: 380px; max-width: 90vw; }
.wf-reject-title { color: #e74c3c; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.wf-reject-box textarea { width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(10,14,20,0.5); color: #c0c8d8; font-size: 13px; outline: none; resize: vertical; }
.wf-reject-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.wf-reject-actions .wf-review-ok { padding: 8px 18px; }

/* ===== 人物视角包选择器 ===== */
.persp-bar { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; }
.persp-select { padding: 5px 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(10,14,20,0.6); color: #c0c8d8; font-size: 12px; outline: none; max-width: 300px; }
.persp-select:hover { border-color: rgba(77,166,255,0.3); }
.persp-active { font-size: 11px; color: #4da6ff; }

/* ============ 综合服务社区面板 ============ */
#service-community { background: #121212; color: #e0e0e0; padding: 20px; overflow-y: auto; }
.sc-layout { display: flex; flex-direction: column; gap: 16px; }
.sc-header { display: flex; flex-direction: column; gap: 12px; }
.sc-search { display: flex; gap: 8px; }
.sc-search input { flex: 1; padding: 10px 14px; background: #1e1e1e; border: 1px solid #444; border-radius: 8px; color: #ddd; font-size: 14px; outline: none; }
.sc-search input:focus { border-color: #3498db; }
.sc-search button { background: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.sc-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-cat-btn { padding: 8px 16px; background: #2a2a2a; border: 1px solid #444; border-radius: 20px; color: #ccc; cursor: pointer; font-size: 13px; transition: 0.2s; }
.sc-cat-btn.active { background: #3498db; border-color: #3498db; color: white; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sc-card { background: #1e1e1e; border-radius: 12px; padding: 20px; cursor: pointer; transition: 0.2s; border: 1px solid #333; }
.sc-card:hover { border-color: #3498db; background: #2a2a2a; }
.sc-card-icon { font-size: 32px; margin-bottom: 12px; }
.sc-card-title { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: #fff; }
.sc-card-desc { font-size: 13px; color: #aaa; line-height: 1.5; margin-bottom: 12px; min-height: 40px; }
.sc-card-footer { display: flex; justify-content: space-between; align-items: center; }
.sc-card-price { color: #27ae60; font-weight: 700; font-size: 16px; }
.sc-card-tag { background: #e67e22; color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; }

/* 弹窗 */
.sc-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.sc-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.sc-modal-content { position: relative; background: #1e1e1e; border-radius: 12px; width: 600px; max-width: 90%; max-height: 80vh; display: flex; flex-direction: column; z-index: 1001; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.sc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #333; }
.sc-modal-header h3 { margin: 0; font-size: 18px; color: #fff; }
.sc-modal-close { background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; }
.sc-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.sc-modal-footer { padding: 16px 20px; border-top: 1px solid #333; text-align: right; }
.sc-order-btn { background: #27ae60; color: white; border: none; padding: 10px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.sc-order-btn:hover { background: #219653; }
.sc-detail-row { margin-bottom: 10px; font-size: 14px; color: #ccc; }
.sc-detail-row strong { color: #fff; }
.sc-form-group { margin-bottom: 12px; }
.sc-form-group label { display: block; font-size: 13px; color: #aaa; margin-bottom: 4px; }
.sc-form-group input, .sc-form-group select, .sc-form-group textarea { width: 100%; padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; color: #ddd; font-size: 14px; }

/* ===== 全局滚动条（统一主题：细 6px 半透明白） ===== */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
*::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }