/* components：组件层重新设计，最后加载。外壳、面板、卡片、步骤条、按钮体系。
   旧样式里 !important 很多，这里同样用 !important 或更高的选择器压住。 */

/* ========== 外壳 ========== */
body{background:var(--n-200)!important}
.app-shell{background:var(--n-100)!important;border:1px solid var(--n-300)!important;box-shadow:var(--shadow-lg)!important;overflow:hidden}
.window-bar{background:var(--n-0)!important;border-bottom:1px solid var(--n-200)!important}
.window-title{font-weight:700;letter-spacing:.02em;color:var(--n-900)}
.app-body{background:var(--n-100)!important}

/* 深色导航栏 */
#appShell .sidebar{background:var(--n-900)!important;border-right:1px solid var(--n-800)}
#appShell .rail-button{color:var(--n-400)!important;box-shadow:none!important;border-radius:var(--radius-md)!important}
#appShell .rail-button:hover{color:var(--n-0)!important;background:color-mix(in srgb,var(--n-0) 8%,transparent)!important}
#appShell .rail-button[aria-current=true]{color:var(--on-accent)!important;background:var(--p-600)!important;box-shadow:0 4px 12px color-mix(in srgb,var(--p-600) 45%,transparent)!important}
#appShell .sidebar hr,#appShell .sidebar .rail-divider{border-color:var(--n-700)!important;background:var(--n-700)!important}

/* 工作区：平铺底色，去掉渐变和玻璃边 */
#appShell .workspace{background:var(--n-100)!important;border:0!important;box-shadow:none!important;border-radius:0!important}

/* ========== 面板 ========== */
#appShell .interaction-page.user-center,#appShell .interaction-page.activity-home,#appShell .interaction-page{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important}
#appShell .user-pool{background:var(--n-900)!important;border:0!important;color:var(--n-300)}
#appShell .user-pool strong,#appShell .user-pool b{color:var(--n-0)!important;font-family:var(--font-mono);letter-spacing:-.01em}
#appShell .user-pool button{background:color-mix(in srgb,var(--n-0) 10%,transparent)!important;color:var(--n-0)!important;border:1px solid color-mix(in srgb,var(--n-0) 18%,transparent)!important}

/* 规则编辑器三栏 + 预览/页面面板 */
#strategyPicker.aw-dialog .rule-library,#strategyPicker.aw-dialog .rule-inspector,
#strategyPicker.aw-dialog .np-library,#strategyPicker.aw-dialog .np-inspector,#strategyPicker.aw-dialog .lg-scenarios{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important}
#strategyPicker.aw-dialog .rule-library h4,#strategyPicker.aw-dialog .rule-inspector h4{font-size:var(--fs-xs)!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500)!important;padding-bottom:8px;border-bottom:1px solid var(--n-150);margin-bottom:10px}
#strategyPicker.aw-dialog .cv-panel{background:var(--n-50)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:inset 0 1px 2px rgb(15 23 42 / .04)!important}
#strategyPicker.aw-dialog .cv-viewport{background-color:var(--n-50)!important;background-image:radial-gradient(var(--n-300) 1px,transparent 1px)!important;background-size:20px 20px!important}
#strategyPicker.aw-dialog .aw-body{background:var(--n-100)!important}

/* ========== 卡片 ========== */
/* 用户分组卡：去掉左侧色条，状态改成胶囊 */
#appShell .segment-card{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-left:1px solid var(--n-200)!important;box-shadow:none!important;border-radius:var(--radius-lg)!important;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
#appShell .segment-card::before{display:none!important}
#appShell .segment-card:hover{border-color:var(--p-300)!important;box-shadow:var(--shadow-md)!important}
#appShell .segment-title h3{font-size:var(--fs-base)!important;font-weight:700!important;color:var(--n-900)!important}
#appShell .segment-status{background:var(--g-50);color:var(--g-700)!important;border:1px solid var(--g-100);border-radius:999px;padding:2px 8px;font-weight:500}
#appShell .segment-metrics strong{font-family:var(--font-mono);font-weight:600!important;color:var(--n-900)!important;letter-spacing:-.02em}
#appShell .segment-metrics button + button{border-left:1px solid var(--n-150)!important}
#appShell .strategy-list-heading{background:transparent!important;border-bottom:1px solid var(--n-200);border-radius:0!important;text-transform:uppercase;letter-spacing:.04em}
#appShell .strategy-row:hover{background:var(--n-50)!important}

/* 画布玩法节点 */
#strategyPicker .cv-node{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;overflow:visible}
#strategyPicker .cv-node.selected{border-color:var(--p-600)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--p-600) 18%,transparent),var(--shadow-lg)!important}
#strategyPicker .cv-node-heading{background:var(--n-0)!important;border-bottom:1px solid var(--n-150)!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;position:relative}
#strategyPicker .cv-node-heading::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--n-300)}
#strategyPicker .cv-node.selected .cv-node-heading::before{background:var(--p-600)}
#strategyPicker .cv-node-heading strong{font-size:var(--fs-base)!important;font-weight:700!important;color:var(--n-900)!important}
#strategyPicker .cv-node-heading small{text-transform:uppercase;letter-spacing:.04em}
#strategyPicker .cv-actions{background:var(--n-0)!important}
#strategyPicker .cv-action{background:var(--n-50)!important;border:1px solid var(--n-150)!important;border-left-width:1px!important;border-radius:var(--radius-md)!important;box-shadow:none!important}
#strategyPicker .cv-action:hover{background:var(--n-0)!important;border-color:var(--p-300)!important}
#strategyPicker .cv-action.selected,#strategyPicker .cv-action[aria-pressed=true],#strategyPicker .cv-action.active{background:var(--p-50)!important;border-color:var(--p-600)!important}
#strategyPicker .cv-action-number{background:var(--n-900)!important;color:var(--n-0)!important;border:0!important;border-radius:var(--radius-sm)!important;font-family:var(--font-mono);font-weight:600}
#strategyPicker .cv-action b,#strategyPicker .cv-action strong{color:var(--n-900)!important}
#strategyPicker .cv-port{background:var(--n-0)!important;border:2px solid var(--p-600)!important}
#strategyPicker .cv-controls,#strategyPicker .cv-minimap{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important}
#strategyPicker .lg-float{background:var(--n-900)!important;border:0!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;color:var(--n-0)!important}
#strategyPicker .lg-float>span{color:var(--a-300)!important;font-weight:600}
#strategyPicker .lg-float .lg-chip{background:color-mix(in srgb,var(--n-0) 10%,transparent)!important;border:1px solid color-mix(in srgb,var(--n-0) 20%,transparent)!important;color:var(--n-0)!important}
#strategyPicker .lg-float .lg-chip.add{border-style:dashed!important;color:var(--a-300)!important}

/* ========== 头部 + 步骤条 ========== */
#strategyPicker.aw-dialog{border:0!important;box-shadow:0 30px 80px rgb(15 23 42 / .35)!important}
#strategyPicker.aw-dialog>header.aw-header{background:var(--n-0)!important;border-bottom:1px solid var(--n-200)!important;min-height:64px!important}
#strategyPicker.aw-dialog .aw-title #awActivityName{font-size:var(--fs-lg)!important;font-weight:700!important;color:var(--n-900)!important}
#strategyPicker.aw-dialog .aw-context-strip{background:var(--n-50)!important;border-bottom:1px solid var(--n-200)!important}
#strategyPicker.aw-dialog .aw-context-strip b{color:var(--n-800)!important}

#strategyPicker .aw-steps-nav{flex:0 0 auto!important;align-self:center!important;margin:0 auto!important;padding:4px!important;gap:4px!important;background:var(--n-100)!important;border:1px solid var(--n-200)!important;border-radius:999px!important;min-height:0!important}
#strategyPicker .aw-steps-nav button{flex-direction:row!important;gap:8px!important;padding:6px 16px 6px 6px!important;border-radius:999px!important;background:transparent!important;border:0!important;color:var(--n-500)!important}
#strategyPicker .aw-steps-nav button::before{display:none!important}
#strategyPicker .aw-steps-nav button:hover{background:color-mix(in srgb,var(--n-0) 70%,transparent)!important}
#strategyPicker .aw-steps-nav .aw-step-no{width:24px!important;height:24px!important;border:0!important;background:var(--n-200)!important;color:var(--n-600)!important;box-shadow:none!important;font-family:var(--font-mono);font-size:var(--fs-sm)!important}
#strategyPicker .aw-steps-nav b{font-size:var(--fs-md)!important;font-weight:600!important;color:inherit!important}
#strategyPicker .aw-steps-nav button.active{background:var(--n-0)!important;color:var(--n-900)!important;box-shadow:var(--shadow-sm),0 0 0 1px var(--n-200)!important}
#strategyPicker .aw-steps-nav button.active .aw-step-no{background:var(--p-600)!important;color:var(--on-accent)!important}
#strategyPicker .aw-steps-nav button.done{color:var(--n-700)!important}
#strategyPicker .aw-steps-nav button.done .aw-step-no{background:var(--g-600)!important;color:var(--on-accent)!important}
#strategyPicker .aw-steps-nav button.done b{color:var(--n-700)!important}
#strategyPicker .aw-steps-nav button.redo .aw-step-no{background:var(--a-500)!important;color:var(--on-accent)!important}
#strategyPicker .aw-steps-nav .hf-step-state.redo{position:static!important;margin-left:-2px}

/* ========== 按钮体系 ========== */
/* 主按钮 */
#strategyPicker.aw-dialog .aw-primary,#strategyPicker [data-hf-primary],.aw-header-actions [data-hf="confirm-plan"]{height:34px;padding:0 16px!important;background:var(--p-600)!important;border:1px solid var(--p-700)!important;color:var(--on-accent)!important;border-radius:var(--radius-md)!important;font-weight:600!important;font-size:var(--fs-md)!important;box-shadow:0 1px 2px rgb(15 23 42 / .12),inset 0 1px 0 color-mix(in srgb,var(--n-0) 18%,transparent)!important}
#strategyPicker.aw-dialog .aw-primary:hover:not(:disabled),#strategyPicker [data-hf-primary]:hover:not(:disabled){background:var(--p-700)!important}
#strategyPicker.aw-dialog .aw-primary:disabled,#strategyPicker [data-hf-primary]:disabled{background:var(--n-200)!important;border-color:var(--n-200)!important;color:var(--n-500)!important;box-shadow:none!important;opacity:1!important}
/* 次按钮 */
#strategyPicker.aw-dialog .aw-secondary,#strategyPicker.aw-dialog .rule-editor-toolbar button,#strategyPicker.aw-dialog .rule-action-tools button,#strategyPicker .lg-phase{height:34px;padding:0 14px!important;background:var(--n-0)!important;border:1px solid var(--n-300)!important;color:var(--n-700)!important;border-radius:var(--radius-md)!important;font-weight:500!important;font-size:var(--fs-md)!important;box-shadow:0 1px 2px rgb(15 23 42 / .05)!important}
#strategyPicker.aw-dialog .aw-secondary:hover,#strategyPicker.aw-dialog .rule-editor-toolbar button:hover,#strategyPicker.aw-dialog .rule-action-tools button:hover,#strategyPicker .lg-phase:hover{background:var(--n-50)!important;border-color:var(--n-400)!important}
/* 虚线"添加"按钮 */
#strategyPicker .lg-phase.add,#strategyPicker .lg-chip.add,#appShell .ao-create{background:transparent!important;border:1px dashed var(--p-400)!important;color:var(--p-700)!important}
#strategyPicker .lg-phase.add:hover,#appShell .ao-create:hover{background:var(--p-50)!important}
/* 库按钮：小卡片 */
#strategyPicker .rule-play-library button,#strategyPicker .rule-atom-library button{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-md)!important;color:var(--n-700)!important;box-shadow:0 1px 1px rgb(15 23 42 / .04)!important}
#strategyPicker .rule-play-library button:hover,#strategyPicker .rule-atom-library button:hover:not(:disabled){border-color:var(--p-600)!important;color:var(--p-700)!important;background:var(--p-25)!important}
#strategyPicker .rule-atom-library button:disabled{background:var(--n-50)!important;color:var(--n-400)!important;box-shadow:none!important}
/* 顶栏按钮 */
#appShell #hfInbox{background:var(--n-900)!important;color:var(--n-0)!important;border-color:var(--n-900)!important;font-weight:600}
#appShell #hfInbox:hover{background:var(--n-700)!important}
/* 发送按钮 */
#appShell .composer button[type=submit]{background:var(--p-600)!important;border-radius:var(--radius-md)!important}
#appShell .composer{background:var(--n-0)!important;border:1px solid var(--n-300)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important}
#appShell .composer input,#appShell .composer textarea{background:transparent!important}

/* ========== 修正与补充 ========== */
/* 用户池横幅：内部按钮透明，演示标记做成胶囊 */
#appShell .user-pool button{background:transparent!important;border:0!important;color:var(--n-300)!important;padding:0!important}
#appShell .user-pool strong{font-size:var(--fs-2xl)!important;margin-left:8px}
#appShell .user-pool .demo-badge{background:color-mix(in srgb,var(--a-500) 18%,transparent)!important;color:var(--a-300)!important;border:1px solid color-mix(in srgb,var(--a-500) 35%,transparent)!important;border-radius:999px!important;padding:2px 10px!important}

/* 工具栏按钮：文字居中；画布/阶段切换的当前项 */
#strategyPicker.aw-dialog .rule-editor-toolbar button:not([hidden]),#strategyPicker .lg-phase:not([hidden]),#strategyPicker.aw-dialog .aw-secondary:not([hidden]),#strategyPicker.aw-dialog .aw-primary:not([hidden]),#strategyPicker [data-hf-primary]:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;gap:6px;line-height:1!important}
#strategyPicker .lg-phase small{font-size:var(--fs-xs)!important;color:var(--n-500)!important}
#strategyPicker .lg-phase.current{background:var(--n-900)!important;border-color:var(--n-900)!important;color:var(--n-0)!important;font-weight:600!important}
#strategyPicker .lg-phase.current small{color:var(--n-400)!important}

/* 检查器里的小按钮 */
#strategyPicker.aw-dialog .rule-action-tools button{height:30px;padding:0 10px!important;font-size:var(--fs-sm)!important}

/* 深色浮层里的状态字 */
#strategyPicker .lg-float small,#strategyPicker .lg-float em{color:var(--g-300)!important}
#strategyPicker .lg-float .warn small,#strategyPicker .lg-float .missing small{color:var(--a-300)!important}

/* 下拉框、模拟工具栏 */
#strategyPicker.aw-dialog select{height:32px;border:1px solid var(--n-300)!important;border-radius:var(--radius-md)!important;background-color:var(--n-0)!important;color:var(--n-800)!important;padding-left:10px}
#strategyPicker [data-ae=reset]:not([hidden]),#strategyPicker .aw-more-simulation summary{height:32px;display:inline-flex;align-items:center;padding:0 12px!important;background:var(--n-0)!important;border:1px solid var(--n-300)!important;border-radius:var(--radius-md)!important;color:var(--n-700)!important;font-weight:500}
#strategyPicker .aw-mock-label{background:var(--a-100)!important;color:var(--a-800)!important;border-radius:999px!important;font-weight:600}

/* 状态剧本按钮 */
#strategyPicker .lg-scenarios button{border-radius:999px!important;background:var(--n-0)!important;border:1px solid var(--n-300)!important;color:var(--n-700)!important}
#strategyPicker .lg-scenarios button:hover{border-color:var(--p-600)!important;color:var(--p-700)!important}
#strategyPicker .lg-scenarios button.active,#strategyPicker .lg-scenarios button[aria-pressed=true]{background:var(--p-600)!important;border-color:var(--p-600)!important;color:var(--on-accent)!important}

/* 对话卡片 */
#appShell .plain-response{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;color:var(--n-700)!important}
#appShell .hf-chat-kicker{display:inline-block;color:var(--p-700)!important;font-weight:600!important;letter-spacing:.02em}
#appShell .oneform-row .detail-actions button{height:32px;padding:0 12px;background:var(--n-0)!important;border:1px solid var(--n-300)!important;color:var(--n-700)!important;border-radius:var(--radius-md)!important;font-weight:500!important}
#appShell .oneform-row .detail-actions button:hover{background:var(--n-50)!important;border-color:var(--n-400)!important}
#appShell .oneform-row .detail-actions [data-hf=start-design]{background:var(--p-600)!important;border-color:var(--p-700)!important;color:var(--on-accent)!important;font-weight:600!important}
#strategyPicker .lg-scenes .lg-phase{height:30px!important;padding:0 12px!important;font-size:var(--fs-sm)!important}

/* 对话区：问候气泡与对话卡片统一；用户消息用深色 */
#appShell .greeting{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;color:var(--n-700)!important;font-size:var(--fs-md)!important}
#appShell .greeting strong{color:var(--p-700)!important;font-weight:600!important}
#appShell .assistant-row .identity small{color:var(--n-500)!important;font-weight:500}
#appShell .user-message{background:var(--n-900)!important;color:var(--n-0)!important;border:0!important;border-radius:var(--radius-lg)!important}

/* 页面交互 · 左侧组件库 */
#strategyPicker .np-library-tabs{padding:3px!important;gap:3px!important;background:var(--n-100)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-md)!important}
#strategyPicker .np-library-tabs button{background:transparent!important;color:var(--n-500)!important;border-radius:var(--radius-sm)!important;padding:6px 4px!important;font-weight:500!important}
#strategyPicker .np-library-tabs button.active{background:var(--n-0)!important;color:var(--n-900)!important;font-weight:600!important;box-shadow:var(--shadow-sm),0 0 0 1px var(--n-200)!important}
#strategyPicker .np-category summary{font-size:var(--fs-xs)!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--n-500)!important;align-items:center}
#strategyPicker .np-category summary::before{color:var(--n-400)}
#strategyPicker .np-category summary small{background:var(--n-100);color:var(--n-500)!important;border-radius:999px;padding:1px 7px;font-family:var(--font-mono)}
#strategyPicker .np-basics button{background:var(--n-0)!important;border:1px solid var(--n-200)!important;border-radius:var(--radius-md)!important;color:var(--n-700)!important;font-weight:500!important;box-shadow:0 1px 1px rgb(15 23 42 / .04)!important;cursor:grab}
#strategyPicker .np-basics button:hover{border-color:var(--p-600)!important;color:var(--p-700)!important;background:var(--p-25)!important}
#strategyPicker .np-basics button:active{cursor:grabbing}