/* Skills Management Page */
.skills-page{display:flex;flex-direction:column;height:calc(100vh / var(--fs,1));width:calc(100vw / var(--fs,1));background:var(--bg0)}

/* Gradient tokens (local fallback; may also be inherited from styles.css if loaded) */
:root{
  --grad-card-blue:linear-gradient(135deg,#4D8AFF 0%,#165DFF 100%);
  --grad-card-purple:linear-gradient(135deg,#A78BFA 0%,#7C3AED 100%);
  --grad-card-green:linear-gradient(135deg,#5ED47E 0%,#00B42A 100%);
  --grad-card-lilac:linear-gradient(135deg,#C4B5FD 0%,#8B5CF6 100%);
  --hero-title-grad:linear-gradient(90deg,#165DFF 0%,#7C3AED 100%);
  --avatar-grad:linear-gradient(135deg,#34D399 0%,#10B981 100%);
}
[data-theme="dark"]{
  --bg0:#0F1115;--bg1:#15171C;--bg2:#1A1D24;--bg3:#232731;--bg4:#2E333E;
  --tx1:#E6E9F0;--tx2:#B4BAC6;--tx3:#7E8594;
  --brd:#2A2F3A;
  /* Lighten accent for readable text on dark surfaces; see styles.css for rationale. */
  --acc:#7FA6FF;--acc2:#A3C4FF;
  --acc-m:rgba(127,166,255,.16);--acc-b:rgba(127,166,255,.5);
  --ok-m:rgba(0,180,42,.18);--ok-b:rgba(0,180,42,.45);
  --err-m:rgba(219,40,40,.18);
  --purple:#B49AFB;--purple-m:rgba(180,154,251,.18);--purple-b:rgba(180,154,251,.5);
  --zh-brand-primary-lightest:rgba(22,93,255,.18);
  --zh-brand-primary-softer:rgba(22,93,255,.3);
}

/* Header */
.sp-header{height:64px;padding:0 24px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:14px;background:var(--bg0);flex-shrink:0}
.sp-logo{width:40px;height:40px;border-radius:11px;object-fit:contain;flex-shrink:0;box-shadow:0 4px 12px rgba(22,93,255,.25)}
.sp-title-wrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-title{font-size:16px;font-weight:600;color:var(--tx1);line-height:1.2}
.sp-subtitle{font-size:11.5px;color:var(--tx3);line-height:1.25}
.sp-back{color:var(--tx2);text-decoration:none;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--bg2);border:1px solid var(--brd);transition:.15s}
.sp-back:hover{color:var(--acc);background:var(--acc-m);border-color:var(--acc-b)}
/* Primary "go back to conversation" button — anchored to the left of the
   header so it's right next to the main work area instead of stranded on the
   right edge near the user menu. Slightly stronger styling than .sp-back. */
.sp-back-primary{color:var(--acc);background:var(--acc-m);border-color:var(--acc-b);font-weight:600;flex-shrink:0}
.sp-back-primary:hover{color:#fff;background:var(--acc);border-color:var(--acc)}
[data-theme="dark"] .sp-back-primary:hover{color:var(--bg0)}
.sp-count{font-size:11px;color:var(--tx3);background:var(--bg3);padding:2px 8px;border-radius:10px}
.sp-header-spacer{flex:1}
.sp-user{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;background:var(--bg2);border:1px solid var(--brd);font-size:12px;color:var(--tx2)}
.sp-user-avatar{width:26px;height:26px;border-radius:50%;background:var(--avatar-grad);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(16,185,129,.32)}
.sp-user-avatar-img{object-fit:cover;background:var(--bg3)}
.sp-user-name{font-weight:500;color:var(--tx1)}
.sp-user-profile{color:var(--acc);text-decoration:none;font-size:11px;font-weight:500;padding:3px 9px;border-radius:5px;background:var(--acc-m);border:1px solid var(--acc-b);transition:.15s;white-space:nowrap}
.sp-user-profile:hover{background:var(--acc);color:#fff}
.sp-user-logout{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:4px;transition:.15s}
.sp-user-logout:hover{color:var(--err);background:var(--err-m)}

/* Body: master-detail */
.sp-body{flex:1;display:flex;overflow:hidden}

/* Left panel: skill list */
.sp-list{width:380px;min-width:320px;border-right:1px solid var(--brd);display:flex;flex-direction:column;background:var(--bg1);flex-shrink:0;position:relative}
/* 拖拽文件导入 Skill */
.sp-list-dragover{outline:2px dashed var(--acc,#6366f1);outline-offset:-6px}
.sp-drop-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.12);backdrop-filter:blur(1px);pointer-events:none;animation:slideUp .12s ease-out}
.sp-drop-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 30px;border-radius:14px;background:var(--bg1,#fff);border:2px dashed var(--acc,#6366f1);box-shadow:0 8px 30px rgba(0,0,0,.14);text-align:center}
.sp-drop-icon{font-size:30px;line-height:1;color:var(--acc,#6366f1);animation:spBounce 1s ease-in-out infinite}
.sp-drop-title{font-size:14px;font-weight:600;color:var(--tx1)}
.sp-drop-sub{font-size:11px;color:var(--tx3);max-width:240px;line-height:1.5}
@keyframes spBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Search */
.sp-search{padding:12px 14px;border-bottom:1px solid var(--brd);flex-shrink:0}
.sp-search-input{width:100%;padding:9px 12px 9px 34px;border-radius:8px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx1);font-size:12.5px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:var(--sans)}
.sp-search-input:focus{border-color:var(--acc-b);box-shadow:0 0 0 3px rgba(22,93,255,.08)}
.sp-search-input::placeholder{color:var(--tx3)}
.sp-search-wrap{position:relative}
.sp-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;font-size:14px}

/* Filters & sort */
.sp-toolbar{padding:10px 14px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--brd);flex-shrink:0}
.sp-filters{display:flex;gap:4px;flex-wrap:wrap}
.sp-chip{padding:4px 10px;border-radius:6px;border:1px solid var(--brd);background:transparent;color:var(--tx3);font-size:10px;cursor:pointer;transition:all .15s;font-family:var(--sans);font-weight:500}
.sp-chip:hover{border-color:var(--acc-b);color:var(--tx2)}
.sp-chip.active{border-color:var(--acc-b);color:var(--acc);background:var(--acc-m)}
.sp-chip.purple.active{border-color:var(--purple-b);color:var(--purple);background:var(--purple-m)}
.sp-sort{display:flex;align-items:center;gap:6px}
.sp-sort-label{font-size:10px;color:var(--tx3);white-space:nowrap}
.sp-sort select{padding:3px 8px;border-radius:5px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);font-size:10px;outline:none;cursor:pointer;font-family:var(--sans)}

/* Actions bar */
.sp-actions{padding:10px 14px;display:flex;gap:6px;border-bottom:1px solid var(--brd);flex-wrap:wrap;flex-shrink:0}
.sp-act-btn{padding:7px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;font-weight:500;font-family:var(--sans)}
.sp-act-btn:hover{border-color:var(--acc-b);color:var(--acc);background:rgba(22,93,255,.08);transform:translateY(-1px)}
.sp-act-btn.primary{background:var(--acc-m);color:var(--acc);border-color:var(--acc-b)}
.sp-act-btn.primary:hover{background:rgba(22,93,255,.25)}

/* Import panels — capped at half the list panel and self-scrolling so they
   don't push .sp-skill-scroll off-screen when the import preview grows tall. */
.sp-import-panel{padding:14px;border-bottom:1px solid var(--brd);background:var(--bg2);animation:slideUp .2s ease-out;flex-shrink:0;max-height:50%;overflow-y:auto}

/* File import progress (选文件导入时的进度条，结构对齐 .sp-batch-bar) */
.sp-import-progress{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--brd);background:var(--acc-m);color:var(--acc);font-size:11.5px;font-weight:500;animation:slideUp .15s ease-out;flex-shrink:0}
.sp-imp-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sp-imp-spin{display:inline-block;width:11px;height:11px;border:2px solid var(--acc-b);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}

/* Skill list scroll area */
.sp-skill-scroll{flex:1;overflow-y:auto;padding:6px}

/* Skill list item */
.sp-item{padding:12px 14px;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:4px;border:1px solid transparent;display:flex;align-items:flex-start;gap:10px}
.sp-item:hover{background:var(--bg2);border-color:var(--brd)}
.sp-item.active{background:var(--bg3);border-color:var(--acc-b);box-shadow:0 0 12px rgba(22,93,255,.06)}
.sp-item-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:1px solid rgba(22,93,255,.15)}
.sp-item-icon.user{background:linear-gradient(135deg,rgba(22,93,255,.2),rgba(22,93,255,.08));color:var(--acc);box-shadow:0 1px 6px rgba(22,93,255,.1)}
.sp-item-icon.preset{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(99,102,241,.08));color:var(--purple);box-shadow:0 1px 6px rgba(139,92,246,.1);border-color:rgba(139,92,246,.15)}
.sp-item-icon.manual{background:var(--bg4);color:var(--tx3);box-shadow:none;border-color:transparent}
.sp-item-body{flex:1;min-width:0}
.sp-item-top{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sp-item-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sp-item-badges{display:flex;gap:4px;flex-shrink:0}
.sp-item-badge{font-size:9px;padding:1px 6px;border-radius:4px;font-weight:600;letter-spacing:.3px}
.sp-item-badge.auto{background:rgba(0,180,42,.12);color:var(--ok);border:1px solid rgba(0,180,42,.15)}
.sp-item-badge.manual{background:var(--bg4);color:var(--tx3)}
.sp-item-badge.preset{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 1px 4px rgba(139,92,246,.25)}
.sp-item-badge.signal{background:rgba(139,92,246,.1);color:#818cf8}
/* 市场提交状态徽标（用户技能卡片） */
.sp-item-badge.mkt-pending{background:rgba(245,158,11,.14);color:#d97706;border:1px solid rgba(245,158,11,.25)}
.sp-item-badge.mkt-approved{background:rgba(0,180,42,.12);color:var(--ok);border:1px solid rgba(0,180,42,.2)}
.sp-item-badge.mkt-rejected{background:rgba(219,40,40,.1);color:var(--err);border:1px solid rgba(219,40,40,.2)}
.sp-item-desc{font-size:10.5px;color:var(--tx3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-item-meta{font-size:9px;color:var(--tx3);margin-top:4px;opacity:.7}

/* Right panel: detail */
.sp-detail{flex:1;overflow-y:auto;background:var(--bg0);padding:0}
.sp-detail-inner{max-width:800px;margin:0 auto;padding:28px 36px}

/* Empty state */
.sp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:48px;text-align:center;color:var(--tx3)}
.sp-empty-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,rgba(22,93,255,.12),rgba(22,93,255,.04));display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;border:1px solid rgba(22,93,255,.1)}
.sp-empty h3{font-size:16px;font-weight:600;color:var(--tx2);margin-bottom:6px}
.sp-empty p{font-size:12px;line-height:1.6;max-width:320px}

/* Detail header */
.sp-d-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--brd)}
.sp-d-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;border:1px solid rgba(22,93,255,.15)}
.sp-d-icon.user{background:linear-gradient(135deg,rgba(22,93,255,.2),rgba(22,93,255,.08));color:var(--acc);box-shadow:0 2px 10px rgba(22,93,255,.15)}
.sp-d-icon.preset{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(99,102,241,.08));color:var(--purple);box-shadow:0 2px 10px rgba(139,92,246,.15);border-color:rgba(139,92,246,.15)}
.sp-d-info{flex:1;min-width:0}
.sp-d-name{font-size:20px;font-weight:700;margin-bottom:4px;letter-spacing:.2px}
.sp-d-id{font-size:11px;color:var(--tx3);font-family:var(--mono);margin-bottom:8px}
.sp-d-meta{display:flex;gap:8px;flex-wrap:wrap}
.sp-d-meta-tag{font-size:10px;padding:3px 10px;border-radius:6px;font-weight:500}
.sp-d-meta-tag.auto{background:rgba(0,180,42,.12);color:var(--ok);border:1px solid rgba(0,180,42,.15)}
.sp-d-meta-tag.manual{background:var(--bg3);color:var(--tx3);border:1px solid var(--brd)}
.sp-d-meta-tag.preset{background:var(--purple-m);color:var(--purple);border:1px solid var(--purple-b)}
.sp-d-meta-tag.time{background:var(--bg2);color:var(--tx3);border:1px solid var(--brd)}
.sp-d-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.sp-d-btn{padding:7px 14px;border-radius:8px;border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:11px;cursor:pointer;font-weight:500;transition:all .2s;font-family:var(--sans);display:flex;align-items:center;gap:5px}
.sp-d-btn:hover{border-color:var(--acc-b);color:var(--acc);background:rgba(22,93,255,.06);transform:translateY(-1px)}
.sp-d-btn.primary{background:var(--acc-m);color:var(--acc);border-color:var(--acc-b)}
.sp-d-btn.primary:hover{background:rgba(22,93,255,.25)}
.sp-d-btn.danger{color:var(--tx3)}
.sp-d-btn.danger:hover{border-color:var(--err);color:var(--err);background:rgba(219,40,40,.06)}
.sp-d-btn.purple:hover{border-color:var(--purple-b);color:var(--purple);background:var(--purple-m)}
.sp-d-btn.teal{color:#0d9488;border-color:rgba(13,148,136,.35)}
.sp-d-btn.teal:hover{border-color:#0d9488;color:#0d9488;background:rgba(13,148,136,.08)}
/* 市场提交状态横幅 */
.sp-market-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;padding:10px 14px;border-radius:10px;font-size:12.5px;border:1px solid var(--brd);background:var(--bg2)}
.sp-market-status .sp-market-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;flex-shrink:0}
.sp-market-status .sp-market-note{color:var(--tx2);line-height:1.5}
.sp-market-status.pending{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3)}
.sp-market-status.pending .sp-market-badge{background:rgba(245,158,11,.16);color:#d97706}
.sp-market-status.approved{background:rgba(0,180,42,.06);border-color:rgba(0,180,42,.25)}
.sp-market-status.approved .sp-market-badge{background:rgba(0,180,42,.14);color:var(--ok)}
.sp-market-status.rejected{background:rgba(219,40,40,.05);border-color:rgba(219,40,40,.22)}
.sp-market-status.rejected .sp-market-badge{background:rgba(219,40,40,.12);color:var(--err)}
/* 预置 Skill“忘记”—— 与技能市场 .pm-card-action.on 的紫粉渐变药丸同源，
   标记这是来自市场、可让 AI 忘记的技能。悬停加深，提示是会改变技能库构成的动作。 */
.sp-d-btn.uninstall{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#A78BFA,#7C3AED);
  box-shadow:0 2px 8px rgba(124,58,237,.25)}
.sp-d-btn.uninstall:hover{transform:translateY(-1px);
  background:linear-gradient(135deg,#7C3AED,#5B21B6);
  box-shadow:0 4px 12px rgba(124,58,237,.4)}
/* 列表 meta 行的热度数字 —— 复用市场卡片 .pm-hot 的橙色，让"我的技能"和"市场"视觉互认 */
.sp-item-hot{color:#F77234;font-weight:600}

/* Detail sections */
.sp-section{margin-bottom:24px}
.sp-section-title{font-size:12px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sp-section-title span{font-size:10px;color:var(--tx3);font-weight:400;text-transform:none;letter-spacing:0}

/* Description box */
.sp-desc-box{padding:12px 16px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd);font-size:13px;line-height:1.6;color:var(--tx1)}

/* Instructions rendered */
.sp-inst-box{padding:16px 20px;border-radius:12px;background:var(--bg1);border:1px solid var(--brd);font-size:14px;line-height:1.7;word-break:break-word}
.sp-inst-box p{margin-bottom:8px}.sp-inst-box p:last-child{margin-bottom:0}
.sp-inst-box code{font-family:var(--mono);font-size:12px;background:var(--bg3);padding:2px 5px;border-radius:3px;color:var(--acc)}
.sp-inst-box pre{background:var(--bg0);border:1px solid var(--brd);border-radius:10px;padding:12px 14px;overflow-x:auto;margin:8px 0}
.sp-inst-box pre code{background:none;padding:0;color:var(--tx1);font-size:12px;line-height:1.6}
.sp-inst-box a{color:var(--acc);text-decoration:underline}
.sp-inst-box ul,.sp-inst-box ol{padding-left:20px;margin:4px 0}
.sp-inst-box li{margin-bottom:4px}
.sp-inst-box h1,.sp-inst-box h2,.sp-inst-box h3{margin:12px 0 6px;font-weight:600}
.sp-inst-box h1{font-size:18px}.sp-inst-box h2{font-size:16px}.sp-inst-box h3{font-size:14px}
.sp-inst-box blockquote{border-left:3px solid var(--acc-b);padding:4px 12px;margin:6px 0;color:var(--tx2);background:var(--bg2);border-radius:0 6px 6px 0}
.sp-inst-box table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.sp-inst-box th{background:var(--bg3);padding:6px 10px;border:1px solid var(--brd);text-align:left;font-weight:600}
.sp-inst-box td{padding:6px 10px;border:1px solid var(--brd)}
.sp-inst-empty{font-size:12px;color:var(--tx3);font-style:italic;padding:16px;text-align:center}

/* Reference files */
.sp-ref{border:1px solid var(--brd);border-radius:10px;margin-bottom:6px;overflow:hidden;transition:border-color .2s}
.sp-ref:hover{border-color:rgba(22,93,255,.2)}
.sp-ref-hd{padding:10px 14px;background:var(--bg2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;user-select:none}
.sp-ref-hd:hover{background:var(--bg3)}
.sp-ref-arrow{color:var(--tx3);font-size:10px;transition:transform .2s;flex-shrink:0}
.sp-ref-arrow.open{transform:rotate(90deg)}
.sp-ref-fname{font-size:12px;font-weight:500;flex:1;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ref-size{font-size:10px;color:var(--tx3)}
.sp-ref-body{border-top:1px solid var(--brd);max-height:400px;overflow-y:auto}
.sp-ref-content{padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-all;color:var(--tx2);background:var(--bg0)}

/* Mode toggle in detail */
.sp-mode-toggle{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd);margin-bottom:12px}
.sp-mode-label{flex:1;font-size:12px;color:var(--tx2)}
.sp-mode-label b{color:var(--tx1);font-weight:600}

/* Version history timeline */
.sp-timeline{margin-left:6px;padding-left:20px;border-left:2px solid var(--brd)}
.sp-tl-item{position:relative;padding-bottom:16px}
.sp-tl-item:last-child{padding-bottom:0}
.sp-tl-dot{position:absolute;left:-25px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--brd);border:2px solid var(--bg0)}
.sp-tl-item:first-child .sp-tl-dot{background:var(--acc);box-shadow:0 0 6px rgba(22,93,255,.3)}
.sp-tl-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.sp-tl-icon{font-size:13px}
.sp-tl-hash{font-size:11px;font-family:var(--mono);background:var(--bg3);padding:1px 6px;border-radius:4px;color:var(--tx2)}
.sp-tl-type{font-size:9px;background:var(--bg3);padding:1px 6px;border-radius:3px;color:var(--tx3);font-weight:500}
.sp-tl-head{font-size:9px;color:var(--acc);font-weight:700;letter-spacing:.5px}
.sp-tl-msg{font-size:12px;color:var(--tx1);margin-bottom:2px}
.sp-tl-signals{font-size:10px;color:var(--tx3)}
.sp-tl-bottom{display:flex;align-items:center;gap:8px;margin-top:3px}
.sp-tl-time{font-size:10px;color:var(--tx3)}
.sp-tl-rollback{padding:2px 8px;border-radius:4px;border:1px solid var(--brd);background:transparent;color:var(--tx3);font-size:10px;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.sp-tl-rollback:hover{border-color:var(--acc-b);color:var(--acc);background:rgba(22,93,255,.06)}

/* Empty list */
.sp-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--tx3);flex:1}
.sp-list-empty p{font-size:12px;line-height:1.6;margin-top:8px}

/* Skeleton — loading placeholders that mirror .sp-item layout so there's
   zero visual jump when real cards arrive. Shimmer reuses the global
   @keyframes shimmer defined in styles.css. */
.sp-skill-skeleton{padding:12px 14px;border-radius:10px;margin-bottom:4px;border:1px solid transparent;
  display:flex;align-items:flex-start;gap:10px;animation:slideUp .25s ease-out}
.sp-sk-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);
  background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.sp-sk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding-top:3px}
.sp-sk-line{height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);
  background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.sp-sk-line.l1{width:65%;height:11px}
.sp-sk-line.l2{width:90%;height:9px;opacity:.7}
.sp-sk-line.l3{width:40%;height:8px;opacity:.5}
/* Stagger the shimmer slightly between rows so it doesn't look like a single block */
.sp-skill-skeleton:nth-child(2n) .sp-sk-icon,
.sp-skill-skeleton:nth-child(2n) .sp-sk-line{animation-delay:.15s}
.sp-skill-skeleton:nth-child(3n) .sp-sk-icon,
.sp-skill-skeleton:nth-child(3n) .sp-sk-line{animation-delay:.3s}

/* Detail-pane loading: hero spinner + cue, so the right half isn't blank */
.sp-detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding:48px;text-align:center;color:var(--tx3);gap:14px}
.sp-detail-loading-ring{width:38px;height:38px;border-radius:50%;
  border:3px solid var(--brd);border-top-color:var(--acc);
  animation:spin .8s linear infinite}
.sp-detail-loading-hint{font-size:13px;color:var(--tx2);font-weight:500}
.sp-detail-loading-sub{font-size:11px;color:var(--tx3);max-width:280px;line-height:1.6}

/* Empty-state quick actions (shown when no skill selected) */
.sp-empty-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.sp-empty-btn{padding:8px 16px;border-radius:8px;border:1px solid var(--brd);background:var(--bg2);
  color:var(--tx2);font-size:12px;cursor:pointer;font-weight:500;font-family:var(--sans);
  transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.sp-empty-btn:hover{border-color:var(--acc-b);color:var(--acc);background:rgba(22,93,255,.06);transform:translateY(-1px)}
.sp-empty-btn.primary{background:var(--acc-m);color:var(--acc);border-color:var(--acc-b)}
.sp-empty-btn.primary:hover{background:rgba(22,93,255,.15)}

/* ───────────────────────────────────────────────────────────────
   作者主页 (/skills/creator/<slug>) —— 单独的 CreatorApp 用
   ─────────────────────────────────────────────────────────────── */
.creator-body{flex:1;overflow-y:auto;padding:32px 40px;max-width:980px;margin:0 auto;width:100%}
@media(max-width:768px){.creator-body{padding:20px 16px}}

.creator-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:14px;padding:60px 20px;color:var(--tx3)}
.creator-err{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:60px 20px;text-align:center;color:var(--tx2)}
.creator-err h3{font-size:18px;margin-bottom:8px;color:var(--tx1)}

/* Hero —— 头像 + 名字 + 统计 + 分享按钮 */
.creator-hero{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:16px;
  background:linear-gradient(135deg,rgba(22,93,255,.08),rgba(139,92,246,.06));
  border:1px solid rgba(22,93,255,.15);margin-bottom:24px;animation:slideUp .25s ease-out}
.creator-hero-av{width:84px;height:84px;border-radius:50%;flex-shrink:0;
  background:var(--avatar-grad);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:32px;font-weight:600;overflow:hidden;
  box-shadow:0 4px 16px rgba(16,185,129,.3)}
.creator-hero-av img{width:100%;height:100%;object-fit:cover}
.creator-hero-av svg{width:38px;height:38px;stroke-width:1.6}
.creator-hero-info{flex:1;min-width:0}
.creator-hero-name{font-size:22px;font-weight:700;color:var(--tx1);letter-spacing:.3px}
.creator-hero-phone{font-size:12px;color:var(--tx3);font-family:var(--mono);margin-top:2px}
.creator-hero-stats{display:flex;align-items:baseline;gap:18px;margin-top:10px;flex-wrap:wrap}
.creator-stat{font-size:12px;color:var(--tx2)}
.creator-stat b{color:var(--acc);font-size:15px;font-weight:700;margin-right:3px}

.creator-share{padding:9px 16px;border-radius:8px;border:1px solid var(--acc-b);
  background:var(--acc);color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
  transition:all .2s;flex-shrink:0;box-shadow:0 2px 8px rgba(22,93,255,.25)}
.creator-share:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,93,255,.35)}

/* Section title (作者主页通用) */
.creator-section-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  color:var(--tx2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.creator-section-btn{margin-left:auto;padding:4px 10px;border-radius:6px;border:1px solid var(--brd);
  background:transparent;color:var(--tx3);font-size:11px;cursor:pointer;font-family:var(--sans);
  font-weight:500;text-transform:none;letter-spacing:0;transition:.15s}
.creator-section-btn:hover{border-color:var(--acc-b);color:var(--acc);background:var(--acc-m)}

/* Bio 区 */
.creator-bio-wrap{margin-bottom:16px}
.creator-bio{padding:14px 16px;border-radius:12px;background:var(--bg1);
  border:1px solid var(--brd);font-size:13.5px;line-height:1.7;color:var(--tx1);
  white-space:pre-wrap;word-break:break-word;min-height:48px}
.creator-bio-edit{padding:14px 16px;border-radius:12px;background:var(--bg1);
  border:1px solid var(--acc-b);box-shadow:0 0 0 3px rgba(22,93,255,.06)}
.creator-bio-edit textarea{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:13.5px;line-height:1.6;outline:none;
  font-family:var(--sans);resize:vertical;min-height:90px;box-sizing:border-box}
.creator-bio-edit textarea:focus{border-color:var(--acc-b)}
.creator-bio-bar{display:flex;align-items:center;gap:6px;margin-top:8px}
.creator-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--brd);
  background:var(--bg2);color:var(--tx2);font-size:12px;cursor:pointer;font-weight:500;
  font-family:var(--sans);transition:.15s}
.creator-btn:hover{border-color:var(--acc-b);color:var(--acc)}
.creator-btn.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.creator-btn.primary:hover{filter:brightness(1.05)}
.creator-btn:disabled{opacity:.5;cursor:not-allowed}

/* 作品集 grid */
.creator-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.creator-preset{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;
  background:var(--bg1);border:1px solid var(--brd);cursor:pointer;transition:all .2s;
  text-decoration:none;color:inherit;animation:slideUp .25s ease-out}
.creator-preset:hover{border-color:var(--acc-b);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(22,93,255,.1)}
.creator-preset-head{display:flex;align-items:center;gap:6px}
.creator-preset-name{font-size:14px;font-weight:600;color:var(--tx1);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-preset-cat{font-size:10px;padding:2px 8px;border-radius:4px;
  background:var(--purple-m);color:var(--purple);font-weight:500}
.creator-preset-desc{font-size:12px;color:var(--tx2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.creator-preset-eg{font-size:11px;color:var(--tx3);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-preset-meta{display:flex;gap:10px;font-size:10.5px;color:var(--tx3);margin-top:4px}
.creator-preset-hot{color:#F77234;font-weight:600}
.creator-empty{padding:30px;text-align:center}
/* 作品卡上的学习按钮 + 详情弹层（req 6：作者主页直接学习 / 查看详情） */
.creator-preset-actions{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--brd)}
.creator-install-btn{font-size:11.5px;font-weight:600;padding:5px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--acc);background:var(--acc);color:#fff;transition:.15s;font-family:var(--sans)}
.creator-install-btn:hover{filter:brightness(1.06)}
.creator-install-btn:disabled{opacity:.6;cursor:default}
.creator-install-btn.installed{background:var(--bg2);color:var(--tx2);border-color:var(--brd)}
.creator-install-btn.lg{font-size:13px;padding:9px 22px}
.creator-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px}
.creator-detail{background:var(--bg1);border:1px solid var(--brd);border-radius:14px;
  width:100%;max-width:var(--dialog-reading);max-height:var(--dialog-max-height);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.3)}
.creator-detail-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--brd)}
.creator-detail-title{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.creator-detail-name{font-size:16px;font-weight:700;color:var(--tx1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-detail-body{padding:16px 18px;overflow-y:auto}
.creator-detail-desc{font-size:13px;color:var(--tx1);line-height:1.65}
.creator-detail-stats{display:flex;gap:14px;font-size:11.5px;color:var(--tx3);margin-top:10px}
.creator-detail-egs{margin-top:14px;padding:10px 12px;background:var(--bg2);border-radius:8px}
.creator-detail-egt{font-size:11px;color:var(--tx3);margin-bottom:5px;font-weight:600}
.creator-detail-eg{font-size:12px;color:var(--tx2);line-height:1.7}
.creator-detail-note{margin-top:14px;font-size:11px;color:var(--tx3);line-height:1.6}
.creator-detail-foot{padding:14px 18px;border-top:1px solid var(--brd);display:flex;justify-content:flex-end}

/* 卡片上的作者徽章变可点击 */
.sp-creator{cursor:default}
.sp-creator.clickable{cursor:pointer;text-decoration:none;color:inherit}
.sp-creator.clickable:hover{border-color:var(--acc-b);background:rgba(22,93,255,.06)}
/* 详情页作者行也变可点击 */
.sp-d-creator.clickable{cursor:pointer}
.sp-d-creator.clickable:hover{border-color:rgba(22,93,255,.3);
  box-shadow:0 4px 14px rgba(22,93,255,.08)}
.sp-d-creator-link{margin-left:auto;font-size:11px;color:var(--acc);font-weight:500;
  padding:5px 10px;border-radius:6px;border:1px solid var(--acc-b);background:var(--acc-m);
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  transition:.15s;flex-shrink:0;font-family:var(--sans)}
.sp-d-creator-link:hover{background:var(--acc);color:#fff}

/* Top Contributors strip 样式已迁移到 presetmarket.css（自包含模态样式表，
   在 index.html / mobile.html / skills.html 三页都加载）。 */

/* ── Creator badge — card (bottom-right of .sp-item) ────────── */
.sp-creator{display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  padding:2px 7px 2px 2px;border-radius:999px;background:var(--bg2);
  border:1px solid var(--brd);font-size:10px;color:var(--tx2);max-width:100%;
  transition:border-color .15s,background .15s}
.sp-item:hover .sp-creator{border-color:rgba(22,93,255,.2)}
.sp-creator-av{width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:var(--avatar-grad);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:9px;font-weight:600;overflow:hidden;letter-spacing:0}
.sp-creator-av img{width:100%;height:100%;object-fit:cover}
.sp-creator-av svg{width:11px;height:11px;stroke-width:2}
.sp-creator-name{font-weight:500;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:120px}
.sp-creator-prefix{color:var(--tx3);font-weight:400}

/* ── Creator row — detail panel (between header and sections) ─ */
.sp-d-creator{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(22,93,255,.06),rgba(139,92,246,.04));
  border:1px solid rgba(22,93,255,.12);margin-bottom:20px;
  animation:slideUp .25s ease-out}
.sp-d-creator-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--avatar-grad);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:600;overflow:hidden;
  box-shadow:0 2px 8px rgba(16,185,129,.25)}
.sp-d-creator-av img{width:100%;height:100%;object-fit:cover}
.sp-d-creator-av svg{width:22px;height:22px;stroke-width:1.7}
.sp-d-creator-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sp-d-creator-label{font-size:10px;color:var(--tx3);font-weight:500;
  letter-spacing:.5px;text-transform:uppercase}
.sp-d-creator-name{font-size:14px;color:var(--tx1);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-d-creator-stats{font-size:11px;color:var(--tx3);margin-top:1px}
.sp-d-creator-stats b{color:var(--acc);font-weight:600}

/* Batch mode */
.sp-act-btn-active{font-weight:600}
.sp-batch-bar{padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--brd);background:rgba(219,40,40,.06);animation:slideUp .15s ease-out;flex-shrink:0}
.sp-batch-link{background:none;border:none;color:var(--acc);font-size:10px;cursor:pointer;padding:2px 6px;border-radius:4px;font-family:var(--sans);font-weight:500}
.sp-batch-link:hover{background:var(--acc-m)}
.sp-batch-count{font-size:10px;color:var(--tx2);font-weight:600}
.sp-batch-del{padding:5px 14px;border-radius:6px;border:none;background:var(--err);color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--sans)}
.sp-batch-del:hover{opacity:.9}
.sp-batch-del:disabled{opacity:.4;cursor:not-allowed}
.sp-batch-check{width:32px;height:32px;border-radius:8px;border:2px solid var(--brd);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .15s;color:transparent}
.sp-batch-check.checked{border-color:var(--acc);background:var(--acc);color:#fff}
.sp-batch-check.disabled{opacity:.3;cursor:not-allowed}
.sp-item.batch-selected{background:rgba(22,93,255,.08);border-color:var(--acc-b)}

/* Signals */
.sp-signal{padding:12px 14px;border-radius:10px;background:var(--bg1);border:1px solid var(--brd);margin-bottom:8px;transition:border-color .2s;animation:slideUp .2s ease-out}
.sp-signal:hover{border-color:rgba(139,92,246,.25)}
.sp-signal.consumed{opacity:.6}
.sp-signal.rejected{opacity:.5}
.sp-sig-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.sp-sig-id{font-size:10px;font-family:var(--mono);color:var(--tx3);background:var(--bg3);padding:1px 6px;border-radius:3px}
.sp-sig-type{font-size:9px;padding:2px 7px;border-radius:4px;background:var(--purple-m);color:var(--purple);font-weight:600;letter-spacing:.3px}
.sp-sig-tier{font-size:9px;font-weight:700;letter-spacing:.5px}
.sp-sig-recur{font-size:9px;color:var(--acc);background:var(--acc-m);padding:1px 5px;border-radius:3px;font-weight:600}
.sp-sig-strength{font-size:9px;color:var(--tx3);font-family:var(--mono)}
.sp-sig-reject{padding:2px 8px;border-radius:4px;border:1px solid var(--brd);background:transparent;color:var(--tx3);font-size:10px;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.sp-sig-reject:hover{border-color:var(--err);color:var(--err);background:rgba(219,40,40,.06)}
.sp-sig-content{font-size:12px;color:var(--tx1);line-height:1.6;margin-bottom:4px}
.sp-sig-trigger{font-size:11px;color:var(--tx3);font-style:italic;margin-bottom:4px;padding:4px 8px;background:var(--bg2);border-radius:6px;border-left:2px solid var(--acc-b)}
.sp-sig-time{font-size:9px;color:var(--tx3)}
.sp-sig-status{font-size:9px;padding:1px 6px;border-radius:3px;font-weight:600}
.sp-sig-status.consumed{background:rgba(0,180,42,.12);color:var(--ok)}
.sp-sig-status.rejected{background:rgba(219,40,40,.1);color:var(--err)}
.sp-sig-consumed-by{font-size:9px;font-family:var(--mono);color:var(--tx3)}
.sp-sig-toggle{background:none;border:none;color:var(--tx2);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 0;font-family:var(--sans);font-weight:500;transition:color .15s}
.sp-sig-toggle:hover{color:var(--tx1)}

/* Diff summary in timeline */
.sp-tl-diff{font-size:10.5px;color:var(--tx3);font-style:italic;margin-bottom:2px;padding:3px 8px;background:var(--bg2);border-radius:4px;border-left:2px solid var(--purple-b);display:inline-block}

/* Header: admin mode-switch (was an inline style) + mobile-only back button */
.sp-mode-switch{display:flex;gap:6px;margin-left:16px}
.sp-mobile-back{display:none}

/* Header: primary section switch (Skills / 角色) — segmented control, makes
   角色 a first-class peer of Skills rather than a modal buried in the corner. */
.sp-nav{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg2);border:1px solid var(--brd);margin-left:8px;flex-shrink:0}
.sp-nav button{border:none;background:transparent;color:var(--tx2);font-size:13px;font-weight:600;padding:5px 16px;border-radius:999px;cursor:pointer;font-family:var(--sans);transition:.15s;white-space:nowrap}
.sp-nav button:hover{color:var(--tx1)}
.sp-nav button.active{background:var(--bg0);color:var(--acc);box-shadow:0 1px 3px rgba(0,0,0,.10)}
[data-theme="dark"] .sp-nav button.active{background:var(--bg3)}

/* 角色（Sub-Agent）内联页 —— 替代原来的弹窗，作为与 Skills 平级的一等区块 */
.sp-roles-page{flex:1;min-height:0;overflow-y:auto;background:var(--bg0)}
/* 860 → 1180：专家卡从"一行一张"改成自适应网格后，860 的栏宽在宽屏上恒定
   只放得下两列、右侧留一大片空白。1180 刚好三列（.re-cards 的 minmax 340）。 */
.sp-roles-inner{max-width:1180px;margin:0 auto;padding:20px 24px 48px}
.sp-roles-intro{margin-bottom:16px}
.sp-share-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border-radius:10px;background:var(--acc-m);border:1px solid var(--acc-b)}

/* ── Responsive: phones & small tablets ───────────────────── */
@media(max-width:768px){
  .skills-page{height:100dvh}

  /* Header — compact, wraps onto a second row when needed */
  .sp-header{height:auto;min-height:52px;padding:8px 12px;gap:8px 10px;flex-wrap:wrap}
  .sp-logo{width:32px;height:32px;border-radius:9px}
  .sp-title{font-size:15px}
  .sp-subtitle{display:none}
  .sp-header-spacer{display:none}
  .sp-title-wrap{flex:1;min-width:0}
  .sp-mode-switch{order:10;flex-basis:100%;margin-left:0;justify-content:center}
  .sp-nav{order:9;flex-basis:100%;margin-left:0;justify-content:center}
  .sp-roles-inner{padding:16px 14px 40px}

  /* Body — master-detail collapses to one pane: list OR detail */
  .sp-body{position:relative}
  .sp-list{width:100%;min-width:0;border-right:none}
  .sp-detail{display:none}
  .skills-page.sp-has-detail .sp-list{display:none}
  .skills-page.sp-has-detail .sp-detail{display:block}

  /* List controls — larger tap targets, 16px inputs avoid iOS zoom */
  .sp-search-input{font-size:16px;padding:11px 12px 11px 34px}
  .sp-chip{font-size:11px;padding:6px 11px}
  .sp-sort select{font-size:12px;padding:5px 8px}
  .sp-act-btn{font-size:12px;padding:9px 13px}

  /* Detail */
  .sp-mobile-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;
    padding:8px 13px;border-radius:8px;border:1px solid var(--brd);background:var(--bg2);
    color:var(--tx2);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--sans)}
  .sp-mobile-back:active{background:var(--bg3);color:var(--acc)}
  .sp-detail-inner{padding:16px 14px}
  .sp-d-header{flex-direction:column;gap:12px}
  .sp-d-actions{width:100%;flex-wrap:wrap}
  .sp-d-btn{flex:1 1 calc(50% - 3px);justify-content:center;padding:10px 12px}
  .sp-expwrap{flex:1 1 calc(50% - 3px)}
  .sp-expmenu{width:min(224px,80vw)}
  .sp-d-id{word-break:break-all}
  .sp-inst-box{padding:14px;font-size:13.5px}
  .sp-timeline{padding-left:16px}

  /* Skill modal (skills.css is loaded only on /skills, so these stay page-scoped) */
  .mx{padding:18px 16px;max-width:94vw;max-height:90vh}
  .fi,.ce{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════
   预置 Skills 管理：拖拽排序、可见手柄、标签徽章
   ═══════════════════════════════════════════════════════════════════ */
/* 可拖卡片：整张卡片留出手柄空间，手柄常驻显示但 hover 时更亮 */
.sp-item.sp-draggable{padding-left:6px}
.sp-item.sp-draggable[draggable=true]{cursor:grab}
.sp-item.sp-draggable[draggable=true]:active{cursor:grabbing}
.sp-drag-handle{
  flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:center;
  width:18px;color:var(--tx3);font-size:14px;line-height:1;letter-spacing:-2px;
  user-select:none;opacity:.45;transition:opacity .15s,color .15s;cursor:grab;
  border-radius:4px;
}
.sp-item:hover .sp-drag-handle{opacity:1;color:var(--acc)}
.sp-drag-handle:hover{background:var(--acc-m)}
.sp-drag-handle:active{cursor:grabbing}

/* 拖拽目标位置高亮 */
.sp-item.sp-drag-over{box-shadow:inset 4px 0 0 0 var(--acc, #165DFF);background:var(--acc-m)}

/* 顶部一行拖拽提示横幅 —— 让管理员第一眼明白能拖 + 暴露紧凑视图开关 */
.sp-drag-hint{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 12px;margin:0 0 8px;
  border-radius:8px;border:1px dashed var(--acc-b);
  background:var(--acc-m);color:var(--tx2);
  font-size:11.5px;line-height:1.45;
}
.sp-drag-hint-icon{
  color:var(--acc);font-size:14px;font-weight:700;
  letter-spacing:-2px;line-height:1;flex-shrink:0;margin-top:2px;
}
.sp-drag-hint-text{flex:1;min-width:0}
.sp-quick-key{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;
  background:var(--bg0);color:var(--acc);border:1px solid var(--acc-b);
  font-size:13px;font-weight:600;margin:0 2px;vertical-align:-2px;
}
.sp-drag-hint-btn{
  flex-shrink:0;padding:4px 12px;border-radius:6px;
  border:1px solid var(--acc-b);background:var(--bg0);color:var(--acc);
  font-size:11px;font-weight:500;cursor:pointer;transition:.15s;font-family:var(--sans);
}
.sp-drag-hint-btn:hover{background:var(--acc);color:#fff}

/* 卡片右侧快捷操作（置顶 / 置底）—— 仅 hover 时变明显，避免视觉拥挤 */
.sp-item{position:relative}
.sp-quick-actions{
  flex-shrink:0;display:flex;flex-direction:column;gap:2px;
  opacity:0;transition:opacity .15s;align-self:center;
}
.sp-item:hover .sp-quick-actions{opacity:1}
.sp-quick-btn{
  width:22px;height:18px;line-height:1;padding:0;
  border-radius:4px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx2);
  font-size:13px;cursor:pointer;transition:.12s;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);
}
.sp-quick-btn:hover:not(:disabled){background:var(--acc);color:#fff;border-color:var(--acc)}
.sp-quick-btn:disabled{opacity:.4;cursor:not-allowed}

/* 紧凑视图 —— 一屏多放卡片，方便长列表排序 */
.sp-skill-scroll.sp-compact .sp-item{padding:6px 10px;gap:8px;align-items:center}
.sp-skill-scroll.sp-compact .sp-item-icon{width:24px;height:24px;font-size:11px;border-radius:6px}
.sp-skill-scroll.sp-compact .sp-item-desc,
.sp-skill-scroll.sp-compact .sp-item-meta,
.sp-skill-scroll.sp-compact .sp-creator{display:none}
.sp-skill-scroll.sp-compact .sp-tag-row{margin-top:0}
.sp-skill-scroll.sp-compact .sp-item-name{font-size:12.5px}
.sp-skill-scroll.sp-compact .sp-item-top{align-items:center}
.sp-skill-scroll.sp-compact .sp-drag-handle{height:24px}

/* ── 右侧"市场预览"面板 — 预置管理模式下未选中 skill 时显示 ── */
.sp-mkt-preview{
  height:100%;display:flex;flex-direction:column;background:var(--bg1);overflow:hidden;
}
.sp-mkt-preview-head{
  padding:18px 22px 12px;border-bottom:1px solid var(--brd);background:var(--bg1);flex-shrink:0;
}
/* 与下方 grid（max-width:1280px、左右各 18px padding）的内容边对齐：
   1280 - 18*2 = 1244。超宽屏下头部文字不会贴在 viewport 左边、与居中的卡片错位。 */
.sp-mkt-preview-head > *{
  width:100%;max-width:1244px;margin-left:auto;margin-right:auto;box-sizing:border-box;
}
.sp-mkt-preview-title{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--tx1);
}
.sp-mkt-preview-badge{
  display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
  font-size:11px;font-weight:600;
  background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(99,102,241,.15));
  color:var(--purple,#7c3aed);
  border:1px solid rgba(139,92,246,.35);
}
.sp-mkt-preview-sub{font-size:11.5px;color:var(--tx3);margin-top:6px;line-height:1.5}
.sp-mkt-preview-sub b{color:var(--tx1);font-weight:600}
.sp-mkt-preview-grid{
  flex:1;overflow-y:auto;padding:14px 18px 24px;
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  /* 用户实际看到的市场是 900px 宽的弹窗（约 3 列）。在超宽屏（如 3440px）下
     不加约束会铺成 10+ 列，与"所有用户看到的样子"不一致。封顶到 ~4 列且居中，
     既忠实于用户视图，又给 admin 留出一点比对用的宽度。 */
  max-width:1280px;width:100%;align-self:center;box-sizing:border-box;
}
.sp-mkt-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:13px;padding:40px;
}
.sp-mkt-card{
  display:flex;gap:10px;padding:12px;
  border-radius:10px;border:1px solid var(--brd);background:var(--bg0);
  cursor:pointer;transition:all .15s;
}
.sp-mkt-card:hover{border-color:var(--acc-b);box-shadow:0 2px 12px rgba(22,93,255,.08);transform:translateY(-1px)}
.sp-mkt-card-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;
}
/* 复用 EntityIcon 的 5 个渐变背景（pm-ic-0..4 定义在 entity-icon.css） */
.sp-mkt-card-body{flex:1;min-width:0}
.sp-mkt-card-name{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.sp-mkt-card-title{
  font-size:13px;font-weight:600;color:var(--tx1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.sp-mkt-tag{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  font-size:10.5px;font-weight:500;line-height:1.5;border:1px solid;white-space:nowrap;
}
.sp-mkt-card-desc{
  font-size:11.5px;color:var(--tx3);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sp-mkt-card-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  font-size:10.5px;color:var(--tx3);margin-top:7px;
}
.sp-mkt-hot{color:#F77234;font-weight:600}
.sp-mkt-rank{padding:1px 6px;border-radius:4px;background:rgba(139,92,246,.12);color:var(--purple,#7c3aed);font-weight:500}
.sp-mkt-cat{padding:1px 6px;border-radius:4px;background:var(--bg3);color:var(--tx2);font-weight:500}

/* 卡片底部标签徽章行 */
.sp-tag-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

/* ═══════════════════════════════════════════════════════════════════
   内联技能编辑器（取代旧的弹窗 SkillModal）
   ───────────────────────────────────────────────────────────────────
   创建/编辑/优化是高频操作，弹窗局促且遮挡上下文。改为在右侧详情区
   原地铺开：左侧技能列表保持可见可切换，编辑区占满整个面板高度，顶部
   工具栏吸顶常驻“返回 / 标题 / 保存”。复用 .fg/.fi/.ce/.sk-* 等既有
   表单样式，只新增外层骨架。
   ═══════════════════════════════════════════════════════════════════ */
.sk-editor{min-height:100%;animation:slideUp .2s ease-out}
.sk-editor-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:12px;
  padding:11px 24px;background:var(--bg0);border-bottom:1px solid var(--brd)}
.sk-editor-back{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:12px;font-weight:600;
  cursor:pointer;font-family:var(--sans);transition:.15s;flex-shrink:0}
.sk-editor-back:hover{border-color:var(--acc-b);color:var(--acc);background:var(--acc-m)}
.sk-editor-back svg{width:14px;height:14px}
.sk-editor-bar-title{flex:1;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--tx1);min-width:0}
.sk-editor-bar-icon{width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:var(--zh-brand-primary-lightest);color:var(--zh-brand-primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid rgba(22,93,255,.18)}
.sk-editor-bar-name{font-size:12.5px;font-weight:500;color:var(--tx3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sk-editor-bar-actions{flex-shrink:0;display:flex;align-items:center;gap:8px}
.sk-editor-inner{width:100%;max-width:900px;margin:0 auto;padding:22px 28px;box-sizing:border-box}
/* 内联模式下指令编辑框可用更高默认高度（弹窗里受 85vh 限制时只能 180px） */
.sk-editor-inner .ce{min-height:200px}
[data-theme="dark"] .sk-editor-bar{background:var(--bg2)}
@media(max-width:768px){
  .sk-editor-bar{padding:9px 12px;gap:8px}
  .sk-editor-back{padding:8px 12px;font-size:12.5px}
  .sk-editor-bar-title{font-size:14px}
  .sk-editor-bar-name{display:none}
  .sk-editor-inner{padding:16px 14px}
}
.mb.on{background:var(--acc-m,rgba(22,93,255,.14));color:var(--acc,#3b82f6);border-color:var(--acc-b,rgba(22,93,255,.5))}

/* ── 工作台：编辑器 + 调试台 并排 ───────────────────────────── */
.sk-editor-split{display:block}
.sk-editor-split.with-debug{display:flex;align-items:stretch;gap:0}
.sk-editor-split.with-debug .sk-editor-inner{flex:1 1 55%;max-width:none;margin:0;min-width:0;
  border-right:1px solid var(--brd)}
.sk-editor-debug{flex:1 1 45%;min-width:380px;max-width:560px;display:flex;flex-direction:column;
  background:var(--bg1);position:sticky;top:54px;align-self:flex-start;
  height:calc(100vh - 54px);overflow:hidden}
@media(max-width:980px){
  .sk-editor-split.with-debug{flex-direction:column}
  .sk-editor-debug{max-width:none;min-width:0;width:100%;height:auto;position:static;
    border-top:1px solid var(--brd)}
  .sk-editor-split.with-debug .sk-editor-inner{border-right:none}
}

/* ── 调试台（Playground）面板 ──────────────────────────────── */
.pg-panel{color:var(--tx1,inherit)}
.pg-embedded{height:100%;min-height:0;display:flex;flex-direction:column}
.pg-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--brd);flex-shrink:0}
.pg-head h3{margin:0;font-size:13.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-body{display:flex;flex-direction:column;min-height:0;flex:1;padding:10px 12px;gap:8px;overflow:hidden}
.pg-hint{font-size:11px;color:var(--tx3);line-height:1.5}
.pg-params{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  background:var(--bg2);border:1px solid var(--brd);border-radius:8px;flex-shrink:0}
.pg-param{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--tx2)}
.pg-param select{padding:3px 6px;border-radius:5px;border:1px solid var(--brd);background:var(--bg0);
  color:var(--tx1);font-size:11.5px;outline:none;cursor:pointer;font-family:var(--sans)}
.pg-param-chk{cursor:pointer}
.pg-stream{flex:1;overflow-y:auto;border:1px solid var(--brd);border-radius:8px;padding:10px;
  background:var(--bg0);min-height:160px}
.pg-empty{color:var(--tx3);font-size:12.5px;text-align:center;padding:24px 8px;line-height:1.6}
.pg-running{color:var(--tx3);font-size:12px;padding:4px 0}
/* 试运行结束后的总执行时间 + 积分消耗汇总条 */
.pg-runstat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:7px 11px;
  font-size:11.5px;color:var(--tx2);background:var(--bg2);border:1px solid var(--brd);border-radius:8px}
.pg-runstat-item{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--tx1)}
.pg-runstat-sep{color:var(--tx3)}
/* 角色调试台：角色返回给上级 Agent 的最终结果封装块 */
.pg-role-final{margin-top:6px;padding:10px 12px;border:1px solid var(--brd);border-radius:10px;
  background:var(--bg2)}
.pg-role-final-tag{font-size:11px;font-weight:600;color:var(--tx3);margin-bottom:6px;
  text-transform:none;letter-spacing:.02em}
/* 上传中指示：附件列表里的占位 + 上传按钮 busy 态 */
.pg-uploading{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);
  padding:6px 10px;border:1px dashed var(--brd);border-radius:8px;background:var(--bg2)}
.pg-uploading .sp{width:12px;height:12px}
.pg-ib2-busy{cursor:default}
.pg-ib2-busy .sp{width:14px;height:14px}
/* 文件预览浮层（复用 styles.css 的 .fp 面板，这里只给它一个居中容器） */
.pg-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px}
.pg-preview-panel{width:94%;max-width:920px;height:88vh;background:var(--bg1);border:1px solid var(--brd);
  border-radius:12px;overflow:hidden;display:flex;box-shadow:0 12px 48px rgba(0,0,0,.28)}
.pg-preview-panel .fp{flex:1;min-width:0}
.pg-samples{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex-shrink:0}
/* 输入卡片：直接复用首页对话框样式（.ib/.ir/.ti/.ib2/.sb/.att-list，见 styles.css），
   这里只做调试台内的微调：不撑破窄栏、别被 flex 列压缩、附件列表限高可滚。 */
.pg-ib{flex-shrink:0;max-width:none;margin:0}
.pg-ib .att-list{max-height:132px;overflow-y:auto}
/* 调试台主区 = 拖拽上传落区（浮层 pointer-events:none，避免打断 enter/leave 计数）*/
.pg-runwrap{flex:1;display:flex;flex-direction:column;min-height:0;gap:8px;position:relative}
.pg-drop-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(22,93,255,.10);backdrop-filter:blur(1px);pointer-events:none;border-radius:8px}
.pg-drop-box{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;border-radius:12px;
  background:var(--bg1);border:2px dashed var(--acc);color:var(--acc);font-size:13px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.14)}
.pg-drop-box svg{width:18px;height:18px}
/* 复用首页 .msgs 消息列，但在调试台窄栏里填满宽度（首页是 780px 居中） */
.pg-msgs{max-width:100%;margin:0;padding:0}

/* 测试记录日志 */
.pg-logs{flex:1;overflow-y:auto;min-height:160px}
.pg-log-list{display:flex;flex-direction:column;gap:6px}
.pg-log-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--brd);
  border-radius:8px;background:var(--bg1);cursor:pointer;transition:.15s}
.pg-log-row:hover{border-color:var(--acc-b,rgba(22,93,255,.5));background:var(--bg2)}
.pg-log-main{flex:1;min-width:0}
.pg-log-msg{display:block;font-size:12.5px;color:var(--tx1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-log-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:5px}
.pg-tag{font-size:10px;color:var(--tx2);background:var(--bg3);border-radius:5px;padding:1px 6px}
.pg-tag-ok{color:#16a34a;background:rgba(22,163,74,.12)}
.pg-tag-err{color:#dc2626;background:rgba(220,38,38,.12)}
.pg-log-time{font-size:10px;color:var(--tx3)}
.pg-log-del{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:13px;padding:2px 6px;flex-shrink:0}
.pg-log-del:hover{color:#dc2626}

/* 测试记录详情弹层 */
.pg-log-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.pg-log-detail{background:var(--bg1);border:1px solid var(--brd);border-radius:12px;
  width:100%;max-width:var(--dialog-reading);max-height:var(--dialog-max-height);display:flex;flex-direction:column;overflow:hidden}
.pg-log-detail-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--brd)}
.pg-log-detail-body{padding:12px 14px;overflow-y:auto}
.pg-log-detail-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}

/* ═══ 批量测试（view==='batch'）═══════════════════════════════════ */
/* 顶部三态导航 */
.pg-nav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pg-navb{padding:6px 14px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);
  border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.pg-navb:hover{color:var(--tx1);border-color:var(--acc-b)}
.pg-navb.active{background:var(--acc-m,rgba(22,93,255,.14));color:var(--acc);border-color:var(--acc-b)}
/* 字号缩放控件（调试输出可读性）：A− / 百分比 / A+，与 tab 同一行右对齐 */
.pg-fs{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--brd);border-radius:8px;
  background:var(--bg0);padding:2px;flex-shrink:0}
.pg-fsb,.pg-fsv{border:none;background:none;color:var(--tx2);cursor:pointer;font-weight:600;
  border-radius:6px;transition:.15s;font-family:inherit}
.pg-fsb{padding:3px 8px;font-size:12.5px;line-height:1.2}
.pg-fsb:hover:not(:disabled){color:var(--acc);background:var(--acc-m,rgba(22,93,255,.14))}
.pg-fsb:disabled{opacity:.4;cursor:not-allowed}
.pg-fsv{padding:3px 6px;font-size:11px;min-width:40px;text-align:center;color:var(--tx3);font-variant-numeric:tabular-nums}
.pg-fsv:hover{color:var(--tx1)}
/* 缩放施加到 .pg-stream 内的阅读内容（气泡 / 工具入参出参）。默认 --pg-fs=1 时
   每个 calc 结果与原字号逐像素相等，故不改变现有观感；仅用户调节时整体等比放大。 */
.pg-stream .bbl{font-size:calc(14px * var(--pg-fs, 1))}
.pg-stream .bbl code{font-size:calc(12px * var(--pg-fs, 1))}
.pg-stream .bbl pre code{font-size:calc(12px * var(--pg-fs, 1))}
.pg-stream .bbl table{font-size:calc(13px * var(--pg-fs, 1))}
.pg-stream .tc-name{font-size:calc(12.5px * var(--pg-fs, 1))}
.pg-stream .tc-code{font-size:calc(11.5px * var(--pg-fs, 1))}
.pg-stream .tc-out{font-size:calc(11.5px * var(--pg-fs, 1))}
.pg-stream .pg-empty{font-size:calc(12.5px * var(--pg-fs, 1))}
.pg-batch{flex:1;display:flex;flex-direction:column;min-height:0;gap:10px;overflow-y:auto}
.pg-bnotice{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;font-size:12px;
  background:rgba(220,38,38,.10);color:#dc2626;border:1px solid rgba(220,38,38,.25)}
.pg-bnotice-x{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:13px}
/* 构建器 */
.pg-bbuild{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.pg-bsec{border:1px solid var(--brd);border-radius:10px;padding:10px 12px;background:var(--bg1)}
.pg-bsec-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.pg-bsec-h b{font-size:13px;color:var(--tx1)}
.pg-bsec-sub{font-size:11px;color:var(--tx3)}
.pg-bcase{border:1px solid var(--brd);border-radius:8px;padding:8px;margin-bottom:7px;background:var(--bg0)}
.pg-bcase-t{width:100%;min-height:42px;resize:vertical;border:none;background:transparent;color:var(--tx1);
  font-size:12.5px;font-family:var(--sans);outline:none;line-height:1.5}
.pg-bcase-side{display:flex;align-items:center;gap:6px;margin-top:4px}
.pg-bcase-del{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:13px;padding:2px 6px;margin-left:auto}
.pg-bcase-del:hover{color:#dc2626}
.pg-bcase-files{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pg-bfile{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--tx2);
  background:var(--bg2);border-radius:5px;padding:2px 6px}
.pg-bfile button{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:11px;padding:0 1px}
.pg-bfile button:hover{color:#dc2626}
.pg-bshared-tog{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);cursor:pointer;margin-top:4px;flex-wrap:wrap}
.pg-bempty{font-size:11.5px;color:var(--tx3);padding:4px 2px}
.pg-bcfg{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--brd);border-radius:8px;
  background:var(--bg0);margin-bottom:6px}
.pg-bcfg select{padding:3px 6px;border-radius:5px;border:1px solid var(--brd);background:var(--bg0);
  color:var(--tx1);font-size:11.5px;outline:none;cursor:pointer;font-family:var(--sans)}
.pg-bopts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 4px}
.pg-btotal{font-size:12px;color:var(--tx2)}
.pg-btotal b{color:var(--acc);font-size:13px}
/* 进度条 */
.pg-bprog{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pg-bprog-bar{flex:1;height:7px;border-radius:4px;background:var(--bg3);overflow:hidden}
.pg-bprog-fill{height:100%;background:var(--acc);border-radius:4px;transition:width .3s}
.pg-bprog-txt{font-size:11.5px;color:var(--tx2);white-space:nowrap}
/* 运行网格 */
.pg-bgrid-wrap{flex:1;overflow:auto;min-height:120px;border:1px solid var(--brd);border-radius:10px;
  padding:8px;background:var(--bg0)}
.pg-grid{border-collapse:separate;border-spacing:6px;width:100%}
.pg-grid th{font-size:11px;color:var(--tx2);font-weight:600;text-align:left;vertical-align:bottom;padding:2px 4px}
.pg-grid-cfg{max-width:170px}
.pg-grid-case{max-width:180px;color:var(--tx1);font-weight:500;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-cell{display:flex;flex-direction:column;gap:3px;width:100%;min-width:130px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--brd);background:var(--bg1);cursor:pointer;text-align:left;transition:.15s;font-family:var(--sans)}
.pg-cell:hover{border-color:var(--acc-b);background:var(--bg2)}
.pg-cell-empty{color:var(--tx3);cursor:default;align-items:center;justify-content:center;min-width:60px}
.pg-cell-empty:hover{border-color:var(--brd);background:var(--bg1)}
.pg-cell-top{display:flex;align-items:center;gap:6px}
.pg-cell-ico{font-size:12px}
.pg-cell-metrics{font-size:10.5px;color:var(--tx2)}
.pg-cell-prev{font-size:10.5px;color:var(--tx3);line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pg-cell-running{border-color:var(--acc-b)}
.pg-cell-err{border-color:rgba(220,38,38,.4)}
.pg-cell-done{border-color:rgba(22,163,74,.35)}
/* 扁平列表（一一对应 / 有重复） */
.pg-celllist{display:flex;flex-direction:column;gap:5px}
.pg-cellrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--brd);border-radius:8px;
  background:var(--bg1);cursor:pointer;transition:.15s}
.pg-cellrow:hover{border-color:var(--acc-b);background:var(--bg2)}
.pg-cellrow-err{border-color:rgba(220,38,38,.35)}
.pg-cellrow-ico{font-size:13px;flex-shrink:0}
.pg-cellrow-main{flex:1;min-width:0}
.pg-cellrow-case{display:block;font-size:12px;color:var(--tx1)}
.pg-cellrow-cfg{color:var(--tx3);font-weight:400}
.pg-cellrow-prev{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pg-cellrow-metrics{font-size:10.5px;color:var(--tx2);white-space:nowrap;flex-shrink:0}
/* 批次卡（测试记录页顶部） */
.pg-batchcards{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}

/* ── Dark mode overrides (skills page) ── */
[data-theme="dark"] .sp-header{background:var(--bg1)}
[data-theme="dark"] .sp-list{background:var(--bg1)}
[data-theme="dark"] .sp-back{background:var(--bg2)}
[data-theme="dark"] .sp-user{background:var(--bg2)}
[data-theme="dark"] .sp-search-input{background:var(--bg0)}
[data-theme="dark"] .sp-card,[data-theme="dark"] .sp-detail{background:var(--bg2)}
[data-theme="dark"] .sp-act-btn{background:var(--bg2)}

/* ═══════════════════════════════════════════════════════════════════
   2026 重设计：列表卡片平铺 · 全屏详情 · 三分屏编辑器
   （复用全局 --bg0..4 / --tx1..3 / --brd / --acc* / --purple* 令牌，
     深浅色自动适配）
   ═══════════════════════════════════════════════════════════════════ */

/* ── 列表页 ─────────────────────────────────────────────────── */
.sp-listpage{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.sp-listbar{display:flex;align-items:center;gap:16px;padding:16px 24px 10px;flex-wrap:wrap}
.sp-listbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;min-width:0}
.sp-listbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.sp-search2{display:flex;align-items:center;gap:8px;height:38px;width:300px;max-width:44vw;padding:0 12px;
  background:var(--bg1);border:1px solid var(--brd);border-radius:10px}
.sp-search2:focus-within{border-color:var(--acc-b);box-shadow:0 0 0 3px rgba(22,93,255,.08)}
.sp-search2-ico{color:var(--tx3);display:flex}.sp-search2-ico svg{width:16px;height:16px}
.sp-search2 input{border:0;outline:0;flex:1;min-width:0;background:transparent;color:var(--tx1);font-size:13px;font-family:var(--sans)}
.sp-search2 input::placeholder{color:var(--tx3)}
.sp-chipdiv{width:1px;height:16px;background:var(--brd);margin:0 2px}
.sp-listbar .sp-chip{padding:6px 12px;border-radius:999px;font-size:12px}
.sp-sort{display:flex;align-items:center;gap:6px}
.sp-sort .sp-sort-label{font-size:12px;color:var(--tx3)}
.sp-tbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:9px;
  border:1px solid var(--brd);background:var(--bg1);color:var(--tx1);font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--sans);transition:.15s}
.sp-tbtn:hover{border-color:var(--acc-b);color:var(--acc);background:var(--acc-m)}
.sp-tbtn:disabled{opacity:.6;cursor:default}
.sp-tbtn svg{width:15px;height:15px}
.sp-tbtn.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.sp-tbtn.primary:hover{filter:brightness(1.06);color:#fff}
.sp-tbtn.danger{border-color:var(--err);color:var(--err)}
.sp-batch-inline{display:flex;align-items:center;gap:8px;margin-right:4px}
.sp-batch-inline .sp-batch-count{font-size:12px;color:var(--tx2)}

/* 导入下拉 */
.sp-impwrap{position:relative}
.sp-imp-scrim{position:fixed;inset:0;z-index:40}
.sp-impmenu{position:absolute;top:calc(100% + 8px);right:0;width:238px;z-index:41;
  background:var(--bg1);border:1px solid var(--brd);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.16);padding:6px;animation:slideUp .12s ease-out}
.sp-impitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;cursor:pointer;transition:.12s}
.sp-impitem:hover{background:var(--bg2)}
.sp-impico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.sp-impt{font-size:13px;font-weight:500;color:var(--tx1);line-height:1.3}
.sp-imps{font-size:11px;color:var(--tx3);line-height:1.3;margin-top:2px}
.sp-impsep{height:1px;background:var(--brd);margin:5px 8px}

/* 导出格式下拉（详情页头部操作区，复用导入下拉样式） */
.sp-expwrap{position:relative;display:inline-flex}
.sp-expwrap>.sp-d-btn{width:100%;justify-content:center}
.sp-expmenu{width:224px}

/* 卡片网格 */
.sp-cardgrid-scroll{flex:1;overflow-y:auto;padding:8px 24px 28px}
.sp-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sp-card{background:var(--bg1);border:1px solid var(--brd);border-radius:14px;padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:10px;transition:box-shadow .18s,transform .18s,border-color .18s;position:relative}
.sp-card:hover{box-shadow:0 6px 20px rgba(22,93,255,.10);transform:translateY(-2px);border-color:var(--acc-b)}
.sp-card.batch-selected{border-color:var(--acc-b);background:var(--acc-m)}
.sp-card.sp-drag-over{box-shadow:inset 4px 0 0 0 var(--acc);background:var(--acc-m)}
.sp-card.sp-draggable[draggable=true]{cursor:grab}
.sp-card.sp-draggable[draggable=true]:active{cursor:grabbing}
.sp-card-top{display:flex;align-items:flex-start;gap:12px}
.sp-card-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;border:1px solid transparent}
.sp-card-ico.user{background:linear-gradient(135deg,rgba(22,93,255,.18),rgba(22,93,255,.06));border-color:rgba(22,93,255,.16)}
.sp-card-ico.preset{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(99,102,241,.08));border-color:rgba(139,92,246,.16)}
.sp-card-ico.manual{background:var(--bg3);border-color:var(--brd)}
.sp-card-head{flex:1;min-width:0}
.sp-card-name{font-size:16px;font-weight:600;color:var(--tx1);line-height:1.3;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.sp-card-badges{display:flex;gap:6px;flex-wrap:wrap}
.sp-card-desc{font-size:13px;color:var(--tx2);line-height:1.6;min-height:41px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--tx3);
  border-top:1px solid var(--brd);padding-top:10px;margin-top:auto}
.sp-card-upd{color:#d29922;font-weight:600;background:rgba(210,153,34,.14);border-radius:4px;padding:1px 6px}
.sp-card-creator{margin-left:auto}
.sp-card-creator .sp-creator{margin-top:0}
.sp-card .sp-quick-actions{margin-left:auto;flex-shrink:0}
.sp-card:hover .sp-quick-actions{opacity:1}
.sp-card-skeleton{cursor:default}
.sp-card-skeleton:hover{transform:none;box-shadow:none;border-color:var(--brd)}

/* ── 详情页（全宽，无侧栏）───────────────────────────────── */
.sp-detailpage{flex:1;overflow-y:auto;background:var(--bg0)}
.sp-crumb{display:flex;align-items:center;gap:8px;max-width:1000px;margin:0 auto;padding:16px 40px 0;font-size:13px;color:var(--tx3)}
.sp-crumb a{display:inline-flex;align-items:center;gap:5px;color:var(--acc);cursor:pointer}
.sp-crumb a svg{width:14px;height:14px}
.sp-crumb a:hover{text-decoration:underline}
.sp-crumb-sep{color:var(--tx3)}
.sp-crumb-cur{color:var(--tx2);font-weight:500}
.sp-detailpage-inner{max-width:1000px;margin:0 auto}
.sp-detailpage-inner .sp-detail-inner{max-width:none;padding:16px 40px 48px}
@media(max-width:768px){.sp-crumb{padding:12px 16px 0}.sp-detailpage-inner .sp-detail-inner{padding:12px 16px 32px}}

/* ── H5：列表页工具条整列堆叠 ────────────────────────────────
   桌面版 .sp-listbar 是“左筛选 / 右操作”一行两组：left 有 flex:1;min-width:0，
   right 靠 margin-left:auto 顶到右边。窄屏下 flex 收缩**先于**换行发生 —— right
   一组按 min-content 占住宽度，left 被压到只剩几十像素，筛选 chip 于是被挤成
   一列竖排文字、按钮又叠在上面（线上 H5 实况）。故在窄屏把两组都改为整行堆叠，
   并让 chip 组横向滚动而不是被压扁。 */
@media(max-width:768px){
  .sp-listbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px 8px}
  .sp-listbar-left{flex-direction:column;align-items:stretch;gap:10px;flex:none;width:100%}
  .sp-search2{width:100%;max-width:none;height:40px}
  .sp-search2 input{font-size:16px}          /* ≥16px 防 iOS 聚焦时自动放大 */

  /* 筛选 chip：不换行、不压扁，超出横向滚动（滚动条隐藏，保留惯性滚动） */
  .sp-filters{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sp-filters::-webkit-scrollbar{display:none}
  .sp-listbar .sp-chip{flex:0 0 auto;white-space:nowrap}
  .sp-chipdiv{flex:0 0 auto}

  /* 排序 / 模块筛选：下拉自适应剩余宽度 */
  .sp-sort{flex-wrap:wrap}
  .sp-sort select{flex:1 1 120px;min-width:0;max-width:240px}

  /* 操作按钮：整行平分，不再挤在筛选组右侧 */
  .sp-listbar-right{margin-left:0;width:100%;flex-wrap:wrap;gap:8px}
  .sp-listbar-right>.sp-tbtn,.sp-impwrap{flex:1 1 auto;min-width:0}
  .sp-impwrap>.sp-tbtn{width:100%;justify-content:center}
  .sp-listbar-right>.sp-tbtn{justify-content:center}
  .sp-batch-inline{flex-basis:100%;margin-right:0;flex-wrap:wrap}
  .sp-impmenu{width:min(280px,calc(100vw - 28px))}

  /* 卡片网格：单列 + 与工具条同一组左右留白 */
  .sp-cardgrid-scroll{padding:8px 14px 24px}
  .sp-cardgrid{grid-template-columns:1fr;gap:12px}
  .sp-drag-hint,.sp-import-progress{margin-left:14px!important;margin-right:14px!important}
}

/* ═══════════════════════════════════════════════════════════════════
   三分屏编辑器
   ═══════════════════════════════════════════════════════════════════ */
.ske{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg0);animation:slideUp .18s ease-out}
.ske-bar{height:54px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--bg1);border-bottom:1px solid var(--brd)}
.ske-back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:8px;
  border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:13px;font-weight:500;
  cursor:pointer;font-family:var(--sans);transition:.15s}
.ske-back:hover{border-color:var(--acc-b);color:var(--acc);background:var(--acc-m)}
.ske-back svg{width:15px;height:15px}
.ske-bar-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--tx1);min-width:0}
.ske-bar-ico{width:28px;height:28px;border-radius:8px;flex-shrink:0;background:var(--purple-m);color:var(--purple);
  display:flex;align-items:center;justify-content:center}.ske-bar-ico svg{width:15px;height:15px}
.ske-bar-name{font-size:12px;color:var(--tx3);font-weight:400;background:var(--bg2);padding:3px 9px;border-radius:6px;
  font-family:var(--mono);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ske-bar-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px}
.ske-bar-tag.purple{background:var(--purple-m);color:var(--purple)}
.ske-save-scope{font-size:11px;color:var(--tx3);max-width:240px;line-height:1.4;text-align:right}
.ske-package-block{padding:8px 4px}.ske-package-name{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2)}.ske-package-name span{flex:1;overflow-wrap:anywhere}.ske-package-name button{border:0;background:transparent;color:var(--tx3);padding:4px;cursor:pointer}.ske-package-name svg{width:14px;height:14px}.ske-package-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--brd);border-radius:6px;padding:4px 7px;background:var(--bg1);color:var(--tx2);font:inherit;white-space:nowrap;cursor:pointer}.ske-package-btn svg{width:13px;height:13px}.ske-package-btn:disabled{opacity:.5;cursor:default}
@media(max-width:900px){.ske-save-scope{max-width:135px;font-size:10px}.ske-cbar{flex-wrap:wrap}}
.ske-bar-spacer{flex:1}
/* 顶栏“发布”= 主操作（蓝填充）；标签页“保存”= 存草稿（次级描边）。*/
.ske-publishbtn{height:34px;padding:0 18px;border-radius:8px;border:0;background:var(--acc);color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);box-shadow:0 2px 8px rgba(22,93,255,.25);transition:.15s}
.ske-publishbtn:hover:not(:disabled){filter:brightness(1.06)}
.ske-publishbtn:disabled{opacity:.45;cursor:default;box-shadow:none}
.ske-tabsave{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 13px;border-radius:7px;
  border:1px solid var(--acc-b);background:var(--acc-m);color:var(--acc);font-size:12px;font-weight:600;
  cursor:pointer;font-family:var(--sans);transition:.15s}
.ske-tabsave svg{width:13px;height:13px}
.ske-tabsave:hover:not(:disabled){background:var(--acc);color:#fff}
.ske-tabsave:disabled{opacity:.45;cursor:default}
/* 未发布草稿提示条 */
.ske-draftbar{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:8px 20px;
  background:#FFF9EC;border-bottom:1px solid #FCE9C0;font-size:12.5px;color:#B87142}
[data-theme="dark"] .ske-draftbar{background:rgba(242,113,28,.12);border-bottom-color:rgba(242,113,28,.3);color:#E0A96D}
.ske-draftbar-txt{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.ske-draftdot{width:7px;height:7px;border-radius:50%;background:#F2711C;flex-shrink:0}
.ske-draftbar-discard{flex-shrink:0;border:1px solid #EAD3AE;background:#fff;color:#B87142;font-size:12px;
  padding:4px 12px;border-radius:6px;cursor:pointer;font-family:var(--sans)}
.ske-draftbar-discard:hover{background:#B87142;color:#fff;border-color:#B87142}
[data-theme="dark"] .ske-draftbar-discard{background:var(--bg2);border-color:rgba(242,113,28,.3);color:#E0A96D}
/* 对话里“已存入草稿”药丸 */
.ske-verpill.draft{background:#FFF3E0;color:#B87142}
[data-theme="dark"] .ske-verpill.draft{background:rgba(242,113,28,.16);color:#E0A96D}
/* 调试 tab 顶部草稿说明 + 空态 */
.ske-dbg-note{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:8px 16px;background:var(--bg2);
  border-bottom:1px solid var(--brd);font-size:11.5px;color:var(--tx3)}
.ske-dbg-note svg{width:13px;height:13px;color:var(--acc)}
.ske-dbg-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;color:var(--tx3);font-size:13px;line-height:1.7}

.ske-split{flex:1;display:flex;min-height:0;background:var(--brd)}
.ske-pane{background:var(--bg0);display:flex;flex-direction:column;min-width:0;min-height:0}
.ske-pane+.ske-pane{border-left:1px solid var(--brd)}
.ske-pane-ai{width:380px;flex-shrink:0;position:relative;background:var(--bg1)}
.ske-pane-dir{width:236px;flex-shrink:0;background:var(--bg1)}
.ske-pane-disp{flex:1;min-width:0}
/* 展示屏隐藏时的伸缩占位块（填满剩余宽度，避免行内右侧留白）*/
.ske-pane-fill{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg0)}
.ske-fill-hint{color:var(--tx3);font-size:13px;text-align:center;line-height:1.7}
/* ④ 调试台常驻栏（仅宽屏 ≥1600px 渲染，见 SkillEditor.js 的 wideScreen 判定）。
   默认宽一点，宽度由内联 style 控制（JS 记忆到 localStorage），左边缘可拖拽调整。*/
.ske-pane-debug{width:560px;flex-shrink:0;background:var(--bg1);position:relative}
.ske-pane-debug .ske-pht svg{color:var(--acc)}
/* 左边缘拖拽手柄：横跨 ③④ 边界，hover 时显示一条 accent 竖线提示可拖 */
.ske-pane-resize{position:absolute;top:0;left:-3px;width:7px;height:100%;cursor:col-resize;z-index:6}
.ske-pane-resize::after{content:"";position:absolute;left:2px;top:0;width:2px;height:100%;background:transparent;transition:background .15s}
.ske-pane-resize:hover::after{background:var(--acc-b)}
/* ①对话栏 / ②目录栏的右边缘拖拽手柄（拖动调宽），hover 显示一条 accent 竖线 */
.ske-pane-resize-r{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:6}
.ske-pane-resize-r::after{content:"";position:absolute;right:2px;top:0;width:2px;height:100%;background:transparent;transition:background .15s}
.ske-pane-resize-r:hover::after{background:var(--acc-b)}
.ske-phead{height:46px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--brd)}
.ske-pht{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--tx1)}
.ske-pht svg{width:15px;height:15px;color:var(--tx3)}
.ske-aidot{width:7px;height:7px;border-radius:50%;background:var(--purple)}
.ske-phactions{margin-left:auto;display:flex;gap:6px}
.ske-phbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border-radius:7px;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);font-size:11.5px;cursor:pointer;font-family:var(--sans);transition:.12s}
.ske-phbtn svg{width:13px;height:13px}
.ske-phbtn:hover{border-color:var(--acc-b);color:var(--acc)}
.ske-phbtn.on{background:var(--acc-m);color:var(--acc);border-color:var(--acc-b)}

/* pane1 chat */
.ske-chat{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px}
.ske-msg{display:flex;gap:9px;max-width:100%;align-items:flex-start}
.ske-msg.user{flex-direction:row-reverse}  /* 用户消息靠右，与 AI 区分 */
.ske-mav{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;overflow:hidden}
.ske-mav img{width:100%;height:100%;object-fit:cover}
.ske-mav svg{width:15px;height:15px;stroke-width:2}
.ske-msg.user .ske-mav{background:var(--avatar-grad);color:#fff}
.ske-msg.assistant .ske-mav{background:var(--purple-m);color:var(--purple)}
.ske-mbody{min-width:0;font-size:13px;line-height:1.6}
.ske-msg.user .ske-mbody{max-width:84%;background:var(--acc-m);color:var(--tx1);padding:9px 12px;border-radius:11px 11px 3px 11px}
.ske-msg.assistant .ske-mbody{background:var(--bg2);color:var(--tx1);padding:10px 12px;border-radius:11px 11px 11px 3px;border:1px solid var(--brd)}
.ske-mtext{word-break:break-word}.ske-mtext p{margin:0 0 6px}.ske-mtext p:last-child{margin:0}
.ske-mtext code{font-family:var(--mono);font-size:12px;background:var(--bg3);padding:1px 4px;border-radius:3px}
.ske-chgcard{margin-top:8px;background:var(--bg0);border:1px solid var(--acc-b);border-radius:8px;padding:8px 10px}
.ske-chgt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--acc);margin-bottom:4px}
.ske-chgt svg{width:13px;height:13px}
.ske-chgl{font-size:11.5px;color:var(--tx2);line-height:1.5}
/* 待确认卡片：AI 改动需用户点“同意修改”后才生效 */
.ske-chgcard.pending{border-color:#F2711C;background:var(--bg1)}
[data-theme="dark"] .ske-chgcard.pending{border-color:rgba(242,113,28,.6)}
.ske-chgcard.pending .ske-chgt{color:#C15A16}
[data-theme="dark"] .ske-chgcard.pending .ske-chgt{color:#E0A96D}
.ske-chgconfirm{display:flex;gap:8px;margin-top:9px}
.ske-chg-apply{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 14px;border-radius:7px;border:0;
  background:var(--acc);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.ske-chg-apply svg{width:14px;height:14px}
.ske-chg-apply:hover{filter:brightness(1.05)}
.ske-chg-reject{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:7px;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);font-size:12.5px;cursor:pointer;font-family:var(--sans)}
.ske-chg-reject:hover{border-color:var(--tx3);color:var(--tx1)}
/* 对话改技能：结构化 Diff 卡片（让用户看清 AI 到底改了什么）*/
.ske-chgsum{font-size:11.5px;color:var(--tx2);line-height:1.5;margin:2px 0 8px}
.ske-diff{margin-top:7px;display:flex;flex-direction:column;gap:6px}
.ske-diff-item{border:1px solid var(--brd);border-radius:7px;overflow:hidden;background:var(--bg1)}
.ske-diff-ihead{display:flex;align-items:center;gap:7px;padding:6px 9px;cursor:pointer;user-select:none}
.ske-diff-ihead:hover{background:var(--bg2)}
.ske-diff-caret{color:var(--tx3);font-size:10px;width:9px;flex-shrink:0;text-align:center}
.ske-diff-label{font-size:12px;font-weight:600;color:var(--tx1);min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.ske-diff-badge{font-size:10px;padding:1px 6px;border-radius:10px;font-weight:600;flex-shrink:0}
.ske-diff-badge.add{background:var(--ok-m);color:var(--ok)}
.ske-diff-badge.del{background:var(--err-m);color:var(--err)}
.ske-diff-stat{font-family:var(--mono);font-size:10.5px;flex-shrink:0;display:flex;gap:6px}
.ske-diff-stat .a{color:#1a7f37}.ske-diff-stat .d{color:#cf222e}
[data-theme="dark"] .ske-diff-stat .a{color:#3fb950}[data-theme="dark"] .ske-diff-stat .d{color:#f85149}
.ske-diff-open{flex-shrink:0;font-size:10.5px;color:var(--acc);background:var(--acc-m);border:1px solid var(--acc-b);
  padding:1px 7px;border-radius:5px;cursor:pointer;line-height:1.6}
.ske-diff-open:hover{background:var(--acc);color:#fff}
.ske-diff-body{max-height:280px;overflow:auto;border-top:1px solid var(--brd);background:var(--bg0)}
.ske-diff-line{display:flex;font-family:var(--mono);font-size:11px;line-height:1.55}
.ske-diff-line .g{width:15px;flex-shrink:0;text-align:center;color:var(--tx3);user-select:none}
/* 中文指令是散文而非代码，narrow 窄栏里换行比横向滚动更友好（内容不被藏起来），
   靠 +/− 落水槽 .g 固定对齐首行 */
.ske-diff-line .c{padding-right:10px;min-width:0;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.ske-diff-line.add{background:rgba(0,180,42,.10)}
.ske-diff-line.add .g{color:#1a7f37}
.ske-diff-line.del{background:rgba(219,40,40,.09)}
.ske-diff-line.del .g{color:#cf222e}
.ske-diff-line.ctx .c{color:var(--tx2)}
[data-theme="dark"] .ske-diff-line.add{background:rgba(63,185,80,.15)}
[data-theme="dark"] .ske-diff-line.add .g{color:#3fb950}
[data-theme="dark"] .ske-diff-line.del{background:rgba(248,81,73,.15)}
[data-theme="dark"] .ske-diff-line.del .g{color:#f85149}
.ske-diff-fold{padding:2px 8px;font-family:var(--mono);font-size:10.5px;color:var(--tx3);background:var(--bg2);
  text-align:center;border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.ske-diff-metahead{font-size:11px;font-weight:600;color:var(--tx2);padding:6px 9px 0;font-family:var(--mono)}
.ske-diff-metabody{padding:5px 9px 7px;display:flex;flex-direction:column;gap:3px}
.ske-diff-mrow{display:flex;gap:6px;font-size:12px;line-height:1.5;word-break:break-word}
.ske-diff-mrow .g{flex-shrink:0;font-family:var(--mono);font-weight:600}
.ske-diff-mrow.del .c{color:var(--tx3);text-decoration:line-through}
.ske-diff-mrow.del .g{color:#cf222e}
.ske-diff-mrow.add .g{color:#1a7f37}
.ske-diff-mnote{font-size:11px;color:var(--tx3);font-style:italic}
.ske-verpill{display:inline-flex;align-items:center;gap:5px;margin-top:8px;background:var(--ok-m);color:var(--ok);
  font-size:11.5px;padding:3px 9px;border-radius:20px;font-weight:600}
.ske-typing{display:flex;gap:4px;padding:4px 2px}
.ske-typing span{width:6px;height:6px;border-radius:50%;background:var(--tx3);animation:skeblink 1.2s infinite}
.ske-typing span:nth-child(2){animation-delay:.2s}.ske-typing span:nth-child(3){animation-delay:.4s}
@keyframes skeblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.ske-chatinput{flex-shrink:0;padding:12px 14px;border-top:1px solid var(--brd)}
.ske-cbox{border:1px solid var(--brd);border-radius:14px;background:var(--bg0);padding:10px 12px;transition:.15s}
.ske-cbox:focus-within{border-color:var(--acc-b);box-shadow:0 0 0 3px rgba(22,93,255,.07)}
.ske-cbox textarea{width:100%;border:0;outline:0;resize:none;background:transparent;color:var(--tx1);
  font-family:var(--sans);font-size:13px;line-height:1.5}
.ske-cbar{display:flex;align-items:center;gap:10px;margin-top:6px}
/* AI 助手模型选择框 —— 与调试台 .pg-param select 同款观感，放在提示与发送按钮之间 */
.ske-model-sel{flex-shrink:0;max-width:150px;padding:3px 6px;border-radius:6px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:11px;outline:none;cursor:pointer;font-family:var(--sans)}
.ske-model-sel:disabled{opacity:.55;cursor:default}
/* 单行、放不下时省略号截断（原先无约束会折行并与发送按钮相撞 → 文字溢出） */
.ske-chint{font-size:11px;color:var(--tx3);min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ske-send{margin-left:auto;flex-shrink:0;width:32px;height:32px;border-radius:9px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#7FA6FF,#2152FC 55%,#8331FF);display:flex;align-items:center;justify-content:center}
.ske-send svg{width:16px;height:16px}
.ske-send:disabled{opacity:.5;cursor:default}
/* pane1 版本历史覆盖 */
.ske-verpanel{flex:1;overflow-y:auto;padding:16px 14px}
.ske-verhint{font-size:12px;color:var(--tx3);line-height:1.5;margin-bottom:10px}
.ske-muted{font-size:12px;color:var(--tx3);padding:10px 2px}

/* pane2 directory */
.ske-tree{flex:1;overflow-y:auto;padding:8px 6px}
.ske-tnode{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;font-size:13px;color:var(--tx1);
  cursor:pointer;user-select:none}
.ske-tnode:hover{background:var(--bg2)}
.ske-tnode.active{background:var(--acc-m);color:var(--acc);font-weight:500}
.ske-tnode.dir{color:var(--tx2)}
.ske-tnode.main{font-weight:500}
.ske-caret{width:12px;flex-shrink:0;font-size:9px;color:var(--tx3);text-align:center}
.ske-tico{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--tx3)}
.ske-tico svg{width:15px;height:15px}
.ske-tnode.active .ske-tico{color:var(--acc)}
.ske-tname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ske-tmeta{margin-left:auto;font-size:10px;color:var(--tx3);flex-shrink:0}
/* 文件节点悬浮操作：重命名 / 删除 */
.ske-tacts{flex-shrink:0;display:none;align-items:center;gap:2px;margin-left:4px}
.ske-tnode.file:hover .ske-tacts{display:flex}
.ske-tacts .ske-tact{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;
  border:none;background:transparent;border-radius:5px;color:var(--tx3);cursor:pointer}
.ske-tacts .ske-tact:hover{background:var(--bg1);color:var(--tx1)}
.ske-tacts .ske-tact.del:hover{background:rgba(220,38,38,.12);color:#dc2626}
.ske-tacts .ske-tact svg{width:13px;height:13px}
/* 触屏设备无 hover：常驻显示，避免不可发现 */
@media (hover:none){.ske-tnode.file .ske-tacts{display:flex}}
.ske-dirfoot{flex-shrink:0;border-top:1px solid var(--brd);padding:8px 10px;font-size:12px;color:var(--tx3);
  display:flex;align-items:center;gap:6px}
.ske-dirfoot-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:30px;padding:0 8px;border:1px solid var(--brd);border-radius:7px;background:var(--bg2);
  color:var(--tx2);font-size:12px;font-family:var(--sans);cursor:pointer;transition:.15s;
  white-space:nowrap;overflow:hidden}
.ske-dirfoot-btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc);background:var(--bg1)}
.ske-dirfoot-btn:disabled{opacity:.55;cursor:default}
.ske-dirfoot-btn svg{width:14px;height:14px;flex-shrink:0}
/* 拖文件进目录栏：整栏浮层提示 + 压住的目录节点高亮（落到该目录下）*/
.ske-pane-dir{position:relative}
.ske-pane-dir.dragging{outline:2px dashed var(--acc);outline-offset:-3px}
.ske-tnode.dropping{background:var(--acc-m);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.ske-tnode.dropping .ske-tico{color:var(--acc)}
.ske-drop-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:56px;background:rgba(22,93,255,.08);pointer-events:none}
.ske-drop-box{display:inline-flex;align-items:center;gap:8px;max-width:92%;padding:10px 13px;border-radius:10px;
  background:var(--bg1);border:2px dashed var(--acc);color:var(--acc);font-size:12px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ske-drop-box svg{width:16px;height:16px;flex-shrink:0}
.ske-drop-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* 落点目录单独一行、过长省略 —— 深层路径不该把提示框撑爆或把词劈开 */
.ske-drop-txt b{font-weight:500;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* pane3 display */
.ske-tabbar{height:40px;flex-shrink:0;display:flex;align-items:stretch;border-bottom:1px solid var(--brd);background:var(--bg2)}
.ske-tab{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:13px;color:var(--tx2);cursor:pointer;
  border-right:1px solid var(--brd);position:relative;white-space:nowrap;max-width:240px;min-width:0}
.ske-tab.on{background:var(--bg0);color:var(--tx1);font-weight:500}
.ske-tab.on::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc)}
.ske-tabico{display:flex;flex-shrink:0}.ske-tabico svg{width:14px;height:14px}
.ske-tablabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ske-tabdot{width:6px;height:6px;border-radius:50%;background:#F2711C;flex-shrink:0}
.ske-tabx{display:flex;flex-shrink:0;color:var(--tx3);border-radius:3px;padding:1px}.ske-tabx svg{width:13px;height:13px}
.ske-tabx:hover{background:var(--bg3);color:var(--tx1)}
.ske-tabbar-actions{margin-left:auto;display:flex;align-items:center;padding:0 10px;gap:8px}
/* 展示屏内容字号缩放控件：嵌在 tab 栏右侧（A− / 百分比 / A+）。总是渲染，靠
   margin-left:auto 右对齐；有“保存”动作区时紧随其后（清掉其 auto 边距避免二次撑开）。 */
.ske-fs{margin-left:auto;align-self:center;flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--brd);border-radius:7px;background:var(--bg0);padding:2px;margin-right:8px}
.ske-fs ~ .ske-tabbar-actions{margin-left:0}
.ske-fsb,.ske-fsv{border:none;background:none;color:var(--tx2);cursor:pointer;font-weight:600;
  border-radius:5px;transition:.15s;font-family:var(--sans)}
.ske-fsb{padding:2px 8px;font-size:12.5px;line-height:1.2}
.ske-fsb:hover:not(:disabled){color:var(--acc);background:var(--acc-m)}
.ske-fsb:disabled{opacity:.4;cursor:not-allowed}
.ske-fsv{padding:2px 5px;font-size:10.5px;min-width:38px;text-align:center;color:var(--tx3);font-variant-numeric:tabular-nums}
.ske-fsv:hover{color:var(--tx1)}
/* 缩放施加到展示屏内的阅读 / 编辑内容（文件正文、SKILL.md 指令、Markdown 预览、
   预览卡）。默认 --ske-fs=1 时每个 calc 结果与原字号逐像素相等，故不改变现有观感；
   仅用户调节时整体等比放大。作用域限定 .ske-dispbody，不影响详情页等其它 .sp-inst-box。 */
.ske-dispbody .ske-fed-area{font-size:calc(13px * var(--ske-fs, 1))}
.ske-dispbody .ske-code{font-size:calc(12.5px * var(--ske-fs, 1))}
.ske-dispbody .ske-fi{font-size:calc(13px * var(--ske-fs, 1))}
.ske-dispbody .ske-pv-name{font-size:calc(22px * var(--ske-fs, 1))}
.ske-dispbody .ske-pv-desc{font-size:calc(14px * var(--ske-fs, 1))}
.ske-dispbody .ske-reffile{font-size:calc(12.5px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box{font-size:calc(14px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box code{font-size:calc(12px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box pre code{font-size:calc(12px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box table{font-size:calc(13px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box h1{font-size:calc(18px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box h2{font-size:calc(16px * var(--ske-fs, 1))}
.ske-dispbody .sp-inst-box h3{font-size:calc(14px * var(--ske-fs, 1))}
.ske-pubbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 13px;border-radius:7px;border:0;
  background:var(--acc);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);
  box-shadow:0 2px 8px rgba(22,93,255,.28)}
.ske-pubbtn svg{width:13px;height:13px}
.ske-pubbtn:disabled{opacity:.45;cursor:default;box-shadow:none}
.ske-dispbody{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}

/* preview + dock */
.ske-preview-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.ske-preview-scroll{flex:1;overflow-y:auto;padding:26px 32px}
.ske-pv-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ske-pv-ico{width:52px;height:52px;border-radius:14px;background:var(--purple-m);color:var(--purple);
  display:flex;align-items:center;justify-content:center}.ske-pv-ico svg{width:24px;height:24px}
.ske-pv-name{font-size:22px;font-weight:600;color:var(--tx1)}
.ske-pv-badges{display:flex;gap:6px;margin-top:6px}
.ske-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:5px;font-size:11px;font-weight:500}
.ske-badge.preset{background:var(--purple-m);color:var(--purple)}
.ske-badge.auto{background:var(--ok-m);color:var(--ok)}
.ske-badge.manual{background:var(--bg3);color:var(--tx3)}
.ske-pvsec{margin-bottom:22px;max-width:820px}
.ske-pvt{font-size:12px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.ske-pvt::after{content:"";flex:1;height:1px;background:var(--brd)}
.ske-pv-desc{font-size:14px;color:var(--tx1);line-height:1.7;background:var(--bg2);border-radius:8px;padding:14px 16px}
.ske-pv-reffiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ske-reffile{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--brd);border-radius:8px;
  font-size:12.5px;background:var(--bg1);min-width:0}
.ske-ric{width:24px;height:24px;border-radius:6px;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ske-ric svg{width:14px;height:14px;color:var(--tx2)}
.ske-rname{font-family:var(--mono);color:var(--tx1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ske-rsize{margin-left:auto;color:var(--tx3);font-size:11px;flex-shrink:0}
/* 调试台 dock */
/* 调试台 dock —— 收起时只露一条 bar；展开时直接嵌 SkillPlayground（它自带
   头部 + 收起按钮，不再叠一层重复头部）。body 给足高度让输入框始终可见。 */
.ske-dock{flex-shrink:0;border-top:1px solid var(--brd);background:var(--bg1);display:flex;flex-direction:column}
.ske-dock-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer}
.ske-dock-bar:hover{background:var(--bg2)}
.ske-dock-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--acc);
  background:var(--acc-m);padding:3px 10px;border-radius:20px}.ske-dock-tag svg{width:13px;height:13px}
.ske-dock-hint{font-size:11.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ske-dock-expand{margin-left:auto;font-size:12px;color:var(--acc);font-weight:500;flex-shrink:0}
.ske-dock-body{height:clamp(320px,46vh,480px);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ske-dock-body .pg-embedded{height:100%}
/* 嵌进 dock 时让流区可收缩，保证底部输入框不被挤出可视区 */
.ske-dock-body .pg-stream{min-height:96px}
.ske-dock-empty{padding:24px;text-align:center;color:var(--tx3);font-size:13px}

/* SKILL.md main editor + file editor forms */
.ske-main-scroll{flex:1;overflow-y:auto;padding:22px 26px;max-width:900px;display:flex;flex-direction:column}
.ske-main-scroll>.ske-fg{flex:0 0 auto}
/* instructions 指令框：撑满剩余高度直到接近屏幕底部（下面 .ske-fg-inst 组内再把
   textarea / 预览撑满），不给用户拖拽手柄。放在 .ske-fg 规则之后靠源码顺序覆盖。 */
.ske-main-scroll>.ske-fg-inst{flex:1 1 auto;min-height:260px}
.ske-fg-inst{display:flex;flex-direction:column}
.ske-fg-inst>label{flex:0 0 auto}
.ske-fg-inst>.ske-code{flex:1 1 0;min-height:0;resize:none}
.ske-fg-inst>.sp-inst-box{flex:1 1 0;min-height:0;overflow:auto}
.ske-fg{margin-bottom:16px}
.ske-fg>label{display:block;font-size:12.5px;font-weight:600;color:var(--tx1);margin-bottom:6px}
.ske-fg>label span{font-weight:400;color:var(--tx3);margin-left:6px}
.ske-fi{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx1);
  font-size:13px;outline:none;font-family:var(--sans);box-sizing:border-box}
.ske-fi:focus{border-color:var(--acc-b);box-shadow:0 0 0 3px rgba(22,93,255,.07)}
/* description 触发条件：多行自增高完整显示，不给拖拽手柄；超长到上限再内部滚动 */
textarea.ske-fi{display:block;line-height:1.6;resize:none;overflow-y:auto;min-height:56px;max-height:40vh}
.ske-fhint{font-size:11px;color:var(--tx3);margin-top:5px;line-height:1.5}
.ske-code{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx1);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;outline:none;resize:vertical;box-sizing:border-box}
.ske-code:focus{border-color:var(--acc-b)}
.ske-modrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);
  border:1px solid var(--brd);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--tx2)}
.ske-modrow b{color:var(--tx1)}
.ske-switch{width:42px;height:23px;border-radius:12px;background:var(--acc);position:relative;cursor:pointer;flex-shrink:0}
.ske-switch::after{content:"";position:absolute;top:2px;left:21px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.18s}
.ske-switch.off{background:var(--bg4)}.ske-switch.off::after{left:2px}
.ske-subtab{padding:3px 11px;border-radius:6px;border:1px solid var(--brd);background:var(--bg0);color:var(--tx3);
  font-size:11.5px;cursor:pointer;font-family:var(--sans)}
.ske-subtab.on{background:var(--acc-m);color:var(--acc);border-color:var(--acc-b)}
.ske-tagsel{display:flex;flex-wrap:wrap;gap:6px}
.ske-tagchip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx2);font-size:12px;cursor:pointer;font-family:var(--sans)}
.ske-tagdot{width:8px;height:8px;border-radius:50%}
/* 文件编辑器 */
.ske-fed-note{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--bg2);
  border-bottom:1px solid var(--brd);font-size:12px}
.ske-fed-path{font-family:var(--mono);color:var(--tx1);font-weight:500}
.ske-fed-dirty{color:#B87142;font-weight:500}
.ske-fed-delbtn{margin-left:auto;background:none;border:1px solid var(--brd);border-radius:6px;color:var(--tx3);
  cursor:pointer;padding:3px 8px;display:flex}.ske-fed-delbtn svg{width:14px;height:14px}
.ske-fed-delbtn:hover{border-color:var(--err);color:var(--err)}
.ske-fed-area{flex:1;min-height:0;width:100%;border:0;outline:0;resize:none;padding:16px 20px;background:var(--bg0);
  color:var(--tx1);font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre;overflow:auto;box-sizing:border-box}
.ske-fed-preview{flex:1;min-height:0;overflow:auto;margin:16px 20px;border-radius:10px}
.ske-binpanel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--tx3);padding:40px}
.ske-bin-ico{width:64px;height:64px;border-radius:16px;background:var(--bg2);display:flex;align-items:center;justify-content:center}
.ske-bin-ico svg{width:30px;height:30px;color:var(--tx2)}
.ske-bin-name{font-family:var(--mono);font-size:15px;color:var(--tx1);font-weight:500}
.ske-bin-meta{font-size:12.5px;color:var(--tx3)}
.ske-bin-del{margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);font-size:12.5px;cursor:pointer;font-family:var(--sans)}
.ske-bin-del:hover{border-color:var(--err);color:var(--err)}.ske-bin-del svg{width:14px;height:14px}

/* 三分屏窄屏兜底：≤1100px 时目录默认可被收起，pane 更紧凑 */
@media(max-width:1180px){.ske-pane-ai{width:330px}.ske-pane-dir{width:200px}}
@media(max-width:900px){
  .ske-split{flex-direction:column;overflow-y:auto}
  .ske-pane{border-left:none!important;border-bottom:1px solid var(--brd)}
  .ske-pane-ai,.ske-pane-dir{width:100%}
  .ske-pane-ai{height:auto;max-height:60vh}.ske-pane-disp{min-height:70vh}
}

/* ══════════════════════════════════════════════════════════════════════
   专家（Sub-Agent）—— 列表重设计 + 二分屏编辑器（.re-*）
   术语：界面称“专家”，内部标识仍是 roles。配色走全局 tokens。
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.re-hero{position:relative;overflow:hidden;border-radius:16px;padding:22px 24px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--acc-m) 0%,var(--purple-m) 100%);
  border:1px solid var(--acc-b)}
.re-hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--acc);background:var(--bg0);padding:4px 12px;border-radius:20px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.re-hero-title{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--tx1)}
.re-hero-sub{margin:0;font-size:13px;line-height:1.6;color:var(--tx2);max-width:640px}
/* 关闭说明卡（桌面 + H5 同一套；关掉后由 .re-tab-info 唤回） */
.re-hero-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;border:1px solid transparent;
  background:transparent;color:var(--tx3);font-size:13px;line-height:1;cursor:pointer;
  font-family:var(--sans);transition:.15s}
.re-hero-x:hover{background:var(--bg0);border-color:var(--brd);color:var(--tx1)}
.re-hero-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acc-m)}

/* ── Tabs ── */
.re-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.re-tab-info{margin-left:2px;width:32px;height:32px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--brd);background:transparent;color:var(--tx3);font-size:14px;
  cursor:pointer;font-family:var(--sans);transition:.15s}
.re-tab-info:hover{border-color:var(--acc-b);color:var(--acc)}
.re-tab{font-size:13px;font-weight:600;padding:7px 18px;border-radius:20px;cursor:pointer;
  border:1px solid var(--brd);background:transparent;color:var(--tx2);transition:all .15s}
.re-tab:hover{border-color:var(--acc-b);color:var(--tx1)}
.re-tab.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ── Toolbar / install ── */
.re-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.re-install{display:flex;gap:6px;align-items:center;margin-left:auto}
.re-install-input{width:200px;margin:0!important}

/* ── Group headings ── */
.re-group-h{font-size:14px;font-weight:700;color:var(--tx1);margin:6px 0 12px;display:flex;align-items:center;gap:8px}
.re-group-n{font-size:12px;font-weight:600;color:var(--tx3);background:var(--bg2);padding:1px 9px;border-radius:10px}

.re-empty{font-size:13px;color:var(--tx3);line-height:1.6;padding:16px 18px;border:1px dashed var(--brd);
  border-radius:12px;background:var(--bg1);margin-bottom:8px}
.re-empty-line{font-size:12.5px;color:var(--tx3);padding:6px 0}

/* ── Cards ──────────────────────────────────────────────────────────────
   专家卡原本是“一行一张、描述不截断、操作按钮全平铺”：一张卡能吃掉一屏，
   而屏幕上真正回答"我有哪些专家"的信息（名字 / 技能数 / 分发状态）只占前两行。
   三处改动一起把密度提上来，且不牺牲可操作性：
     · 列表 → 自适应网格（宽屏两列以上），窄屏自动回到单列
     · 描述截断到 3 行，点一下展开（.re-card-desc.on）—— 长文归编辑器
     · 操作按主次分层：主操作 + 1~2 个常用 + “更多 ⋯”溢出菜单（.re-menu）
       同 marketplace.css §3 版本条的取舍：一张卡不该长得像一块控制面板。 */
.re-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;align-items:start}
.re-card{display:flex;gap:14px;padding:16px;border-radius:14px;border:1px solid var(--brd);
  background:var(--bg0);transition:border-color .15s,box-shadow .15s,transform .1s}
.re-card:hover{border-color:var(--acc-b);box-shadow:0 4px 16px rgba(0,0,0,.06)}
/* 停用的专家：整卡降饱和 + 半透明，一眼可辨“不参与委派”（头像/操作区不变淡以便操作） */
.re-card.re-card-off{background:var(--bg1);opacity:.72}
.re-card.re-card-off .re-card-av{filter:grayscale(.85)}
.re-card.re-card-off .re-card-acts{opacity:1}
.re-card-av{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:20px;font-weight:700;color:#fff}
.re-av-0{background:linear-gradient(135deg,#6d5df6,#8b7cff)}
.re-av-1{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.re-av-2{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.re-av-3{background:linear-gradient(135deg,#10b981,#34d399)}
.re-av-4{background:linear-gradient(135deg,#ec4899,#f472b6)}
.re-av-5{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.re-card-body{flex:1;min-width:0}
.re-card-top{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:5px}
.re-card-name{font-weight:700;font-size:15px;color:var(--tx1)}
.re-card-desc{font-size:12.5px;color:var(--tx2);line-height:1.55;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 可点开：专家描述常有十几行（触发词清单），全展开会把卡片撑成一屏 */
.re-card-desc.clampable{cursor:pointer}
.re-card-desc.on{display:block;-webkit-line-clamp:none;overflow:visible}
.re-desc-more{border:0;background:none;padding:0;margin:-6px 0 10px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;color:var(--acc)}
.re-desc-more:hover{text-decoration:underline}
/* 专家卡片作者署名 */
.re-card-author{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:12px;color:var(--tx2)}
.re-card-author .re-auth-by{font-size:10.5px;color:var(--tx3);padding:1px 6px;border-radius:5px;background:var(--bg3);flex-shrink:0}
.re-card-author .re-auth-av{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0}
.re-card-author .re-auth-av.ph{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00B42A,#1B9D3C);color:#fff;font-size:10px;font-weight:600;line-height:1}
.re-card-author .re-auth-name{font-weight:600;color:var(--tx1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.re-card-author .re-auth.official{padding:2px 8px;border-radius:9px;background:var(--ok-m,rgba(0,180,42,.1));color:var(--ok,#00B42A);border:1px solid rgba(0,180,42,.2);font-weight:600;font-size:11px}
.re-card-acts{display:flex;flex-wrap:wrap;gap:7px;align-items:center;position:relative}

/* ── 溢出菜单（“更多 ⋯”）────────────────────────────────────────────
   一张分享中的专家卡原本平铺 9~11 个同等重量的按钮（复制链接 / 查看分享码 /
   有效期 / 安装者 / 收回分享 / 上架 / 下架 / 提交团队 / 删除…），四行按钮把
   卡片变成控制面板，也让真正高频的“编辑 · 试运行”失去主次。现在只留
   主操作 + 启停 + 一个常用，其余进这里。 */
.re-menuwrap{position:relative;display:inline-flex}
.re-more-btn{display:inline-flex;align-items:center;gap:5px}
.re-more-caret{font-size:10px;line-height:1;opacity:.7}
.re-menu-back{position:fixed;inset:0;z-index:59}
.re-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;
  padding:5px;border-radius:11px;border:1px solid var(--brd);background:var(--bg0);
  box-shadow:0 10px 30px rgba(0,0,0,.14);display:flex;flex-direction:column}
[data-theme="dark"] .re-menu{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.re-menu-i{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:8px 10px;border:0;border-radius:7px;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--tx2);white-space:nowrap}
.re-menu-i:hover{background:var(--bg2);color:var(--tx1)}
.re-menu-i.danger{color:#d33}
.re-menu-i.danger:hover{background:rgba(220,38,38,.08)}
.re-menu-t{flex:1;min-width:0}
.re-menu-h{font-size:11px;color:var(--tx3);font-weight:600}
.re-menu-sep{height:1px;background:var(--brd);margin:4px 2px}
.re-menu-grp{font-size:10px;font-weight:700;color:var(--tx3);letter-spacing:.5px;
  padding:6px 10px 3px}
.re-reject{font-size:12px;color:#d33;margin:0 0 8px}
/* 0 技能草稿的行动提示（专家已存在但不可委派，见 RolesPanel StatusTags） */
.re-draft-note{font-size:12px;color:var(--warn);margin:0 0 8px}

.re-c-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 9px;border-radius:11px;
  background:var(--bg2);color:var(--tx3);white-space:nowrap}
.re-c-tag.acc{background:var(--acc-m);color:var(--acc)}
.re-c-tag.warn{background:var(--warn-m);color:var(--warn)}
.re-c-tag.danger{background:rgba(220,38,38,.12);color:#dc2626}

.re-share-code{font-size:16px;letter-spacing:1px;padding:8px 14px;background:var(--bg2);
  border-radius:8px;text-align:center;font-family:ui-monospace,Menlo,monospace}

/* ── Buttons ── */
.re-btn{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;
  flex-shrink:0;border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);transition:all .15s;font-family:inherit}
.re-btn:hover:not(:disabled){border-color:var(--acc-b);color:var(--tx1)}
.re-btn:disabled{opacity:.5;cursor:not-allowed}
.re-btn.sm{padding:5px 12px;font-size:12px}
.re-btn.danger{color:#d33}
.re-btn.danger:hover:not(:disabled){border-color:#d33;color:#d33;background:rgba(220,38,38,.06)}
.re-btn-primary{background:var(--acc);border-color:var(--acc);color:#fff}
.re-btn-primary:hover:not(:disabled){background:var(--acc);color:#fff;filter:brightness(1.06)}

/* ── 专家列表：窄屏（H5）── */
@media(max-width:600px){
  .re-cards{grid-template-columns:1fr;gap:10px}
  .re-card{padding:13px;gap:11px;border-radius:12px}
  .re-card-av{width:40px;height:40px;border-radius:10px;font-size:17px}
  .re-card-name{font-size:14px}
  .re-card-desc{font-size:12px;-webkit-line-clamp:2}
  /* 主操作吃掉整行剩余宽度；放不下时折到第二行（≤360px 会），
     但绝不再回到"四行按钮"的老样子 */
  .re-card-acts{gap:6px}
  .re-card-acts .re-btn{padding:7px 11px}
  .re-card-acts .re-btn-primary{flex:1 1 auto}
  .re-toolbar{gap:8px}
  .re-install{margin-left:0;flex:1 1 100%}
  .re-install-input{width:auto;flex:1;font-size:16px}
  /* 窄屏：菜单改为贴着**操作行**铺满卡片宽度。按 .re-menuwrap 定位时，
     一旦“更多”按钮折到行首，right:0 的菜单会整块滑出屏幕左侧（实测）。
     把定位父级交给 .re-card-acts，无论按钮落在哪儿都不会溢出。 */
  .re-menuwrap{position:static}
  .re-menu{left:0;right:0;min-width:0}
  .re-menu-i{padding:11px 12px}   /* 触控高度 */
}

/* ══════════════════════════════════════════════════════════════════════
   专家广场（market）重设计 —— 搜索 + 筛选 chip + 排序 + 响应式卡片网格 + 详情弹窗
   全部走设计系统 tokens，明暗自适应；.rm-* 命名空间独立于列表用的 .re-* 卡片。
   ══════════════════════════════════════════════════════════════════════ */
/* ── 榜单 rail：热度榜 / 上新榜（迁移 112）──
   与技能广场的 .mkt-rank 同一形态、同一交互语汇（两个 tab + 横向滚动的紧凑排行），
   只是换到 .rm-* 命名空间。用户在两个广场看到的必须是同一个控件，否则"热度榜"
   会被当成两件不同的事。
   专家侧不需要技能侧那套高度链保护：这一页是 .sp-roles-page 单一滚动容器
   （skills.css §.sp-roles-page），插一块进去没有副作用。 */
.rm-rank{margin-bottom:14px}
.rm-rank-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rm-rank-tabs{display:flex;gap:8px;flex-wrap:wrap}
.rm-rank-tab{padding:3px 10px;border-radius:8px;border:1px solid var(--brd);
  background:var(--bg2);color:var(--tx2);font-size:11.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:all .15s}
.rm-rank-tab:hover{border-color:var(--acc);color:var(--tx1)}
.rm-rank-tab.on{background:var(--acc-m);border-color:var(--acc);color:var(--acc)}
.rm-rank-hint{font-size:10.5px;color:var(--tx3)}
.rm-rank-all{margin-left:auto;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:11px;color:var(--tx3)}
.rm-rank-all:hover{color:var(--acc)}
.rm-rank-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.rm-rank-row::-webkit-scrollbar{height:5px}
.rm-rank-row::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:3px}
.rm-rk{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 8px;flex:none;
  border:1px solid var(--brd);border-radius:11px;background:var(--bg1);
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rm-rk:hover{border-color:var(--acc)}
.rm-rk:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.rm-rk-avw{position:relative;flex:none}
.rm-rk-av{width:30px;height:30px;border-radius:9px;font-size:13px}
.rm-rk-rank{position:absolute;right:-3px;bottom:-3px;min-width:14px;height:14px;
  border-radius:7px;background:var(--bg2);color:var(--tx2);font-size:9px;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg1);padding:0 3px}
.rm-rk-rank.r1{background:#F7B500;color:#fff}
.rm-rk-rank.r2{background:#B8C0CC;color:#fff}
.rm-rk-rank.r3{background:#D08B5B;color:#fff}
.rm-rk-info{display:flex;flex-direction:column;min-width:0}
.rm-rk-name{font-size:12px;font-weight:600;color:var(--tx1);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-rk-stat{font-size:10px;color:var(--tx3);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rm-rk-cta{flex:none;font-size:10.5px;font-weight:600;color:var(--acc);padding-left:2px}

/* 工具条 */
.rm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rm-head-l{flex:1;min-width:220px}
.rm-search{position:relative;display:flex;align-items:center}
.rm-search-ic{position:absolute;left:12px;color:var(--tx3);pointer-events:none}
.rm-search-in{width:100%;padding:9px 34px 9px 34px;border-radius:10px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:13px;outline:none;font-family:inherit;
  transition:border-color .15s,box-shadow .15s}
.rm-search-in:focus{border-color:var(--acc-b);box-shadow:0 0 0 3px var(--acc-m)}
.rm-search-in::placeholder{color:var(--tx3)}
.rm-search-x{position:absolute;right:8px;width:20px;height:20px;border:none;background:var(--bg3);color:var(--tx2);
  border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.rm-search-x:hover{background:var(--bg4);color:var(--tx1)}
.rm-head-r{display:flex;align-items:center;gap:8px}
.rm-sort-lbl{font-size:12px;color:var(--tx3);white-space:nowrap}
.rm-sort.re-select{min-width:120px}

/* 筛选 chip 组 */
.rm-filters{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.rm-fg{display:flex;align-items:center;gap:8px}
.rm-fg-lbl{font-size:11.5px;font-weight:600;color:var(--tx3);white-space:nowrap}
.rm-fg-chips{display:flex;gap:5px;flex-wrap:wrap}
.rm-chip{font-size:12px;font-weight:500;padding:4px 12px;border-radius:16px;cursor:pointer;
  border:1px solid var(--brd);background:transparent;color:var(--tx2);transition:all .15s;font-family:inherit}
.rm-chip:hover{border-color:var(--acc-b);color:var(--tx1)}
.rm-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* 统计条 */
.rm-stats{font-size:12px;color:var(--tx3);margin-bottom:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rm-stats b{color:var(--tx1);font-weight:700}
.rm-stats-dot{opacity:.5}
.rm-stats-match{margin-left:4px;padding:1px 9px;border-radius:10px;background:var(--acc-m);color:var(--acc);font-weight:600}

/* 卡片网格 */
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.rm-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;border:1px solid var(--brd);
  background:var(--bg0);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.rm-card:hover{border-color:var(--acc-b);box-shadow:0 6px 22px rgba(0,0,0,.08);transform:translateY(-2px)}
.rm-card-head{display:flex;gap:12px;align-items:flex-start}
.rm-av{width:44px;height:44px;border-radius:12px;flex-shrink:0}
.rm-av.lg{width:54px;height:54px;border-radius:14px;font-size:24px}
.rm-card-ht{flex:1;min-width:0}
.rm-card-name{font-size:15px;font-weight:700;color:var(--tx1);line-height:1.3;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.rm-badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:8px;white-space:nowrap;
  background:var(--acc-m);color:var(--acc)}
.rm-badge.official{background:var(--ok-m,rgba(0,180,42,.12));color:var(--ok,#00B42A)}
.rm-badge.soft{background:var(--bg2);color:var(--tx3)}
/* “新上架”（迁移 112）—— 与官方/社区同级的状态徽章，不抢分类的视觉重量 */
.rm-badge.fresh{background:var(--ok-m,rgba(0,180,42,.12));color:var(--ok,#00B42A)}
.rm-card-desc{font-size:12.5px;color:var(--tx2);line-height:1.55;flex:1;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rm-card .re-card-author{margin:0}
.rm-card-foot{display:flex;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--brd)}
.rm-installs{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tx3)}
.rm-installs svg{width:14px;height:14px;opacity:.85}
/* 近期新增聘用与累计聘用并排。两个数字必须长得不一样，否则读不出
   "↑4" 说的是最近、图标后面那个数说的是历史。 */
.rm-trend{font-size:12px;font-weight:600;color:var(--ok,#00B42A)}
.rm-foot-cta{margin-left:auto;display:flex;gap:6px}
.rm-mine{font-size:11.5px;font-weight:600;color:var(--tx3);padding:4px 10px;border-radius:8px;background:var(--bg2)}

/* 加载骨架 */
.rm-card-sk{height:196px;cursor:default;border-style:dashed;
  background:linear-gradient(90deg,var(--bg1) 25%,var(--bg2) 37%,var(--bg1) 63%);
  background-size:400% 100%;animation:rm-shimmer 1.4s ease-in-out infinite}
.rm-card-sk:hover{transform:none;box-shadow:none;border-color:var(--brd)}
@keyframes rm-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* 详情弹窗 */
.re-modal.rm-detail{width:min(var(--dialog-reading),100%);gap:12px}
.rm-detail-head{display:flex;gap:14px;align-items:flex-start}
.rm-detail-ht{flex:1;min-width:0}
.rm-detail-name{font-size:18px;font-weight:700;color:var(--tx1);margin-bottom:8px;word-break:break-word}
.rm-detail .re-card-author{margin:0}
.rm-detail-desc{font-size:13px;color:var(--tx2);line-height:1.65;white-space:pre-wrap;word-break:break-word;
  max-height:38vh;overflow:auto}
.rm-detail-note{font-size:12px;color:var(--tx3);line-height:1.6;padding:10px 12px;border-radius:10px;
  background:var(--bg1);border:1px solid var(--brd)}

@media(max-width:600px){
  .rm-head-r{width:100%}
  .rm-sort.re-select{flex:1}
  .rm-filters{gap:10px}
  .rm-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   AI 择才台（.rx-*）—— “描述你的需求，AI 帮你挑专家”
   ────────────────────────────────────────────────────────────────────
   视觉上必须与它下方的普通搜索框**明确区分**（否则页面上出现两个长得一样的
   输入框，用户不知道该用哪个）：淡强调色底 + 一道顶部渐变条 + ✨。
   但也不能喧宾夺主 —— 底色只到 6% 透明度，不用实心强调色块。
   全部走设计系统 tokens，明暗自适应。
   ══════════════════════════════════════════════════════════════════════ */
.rx{position:relative;margin-bottom:16px;padding:15px 16px 14px;border-radius:14px;
  border:1px solid var(--acc-b);background:var(--acc-m);overflow:hidden}
.rx::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#4D8AFF,#165DFF 45%,#7C4DFF)}
.rx-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.rx-spark{font-size:18px;line-height:1.25;flex-shrink:0}
.rx-head-t{min-width:0}
.rx-title{font-size:14.5px;font-weight:700;color:var(--tx1);line-height:1.35}
.rx-sub{font-size:12px;color:var(--tx3);line-height:1.55;margin-top:3px}

/* 输入行 */
.rx-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rx-in{flex:1;min-width:200px;padding:9px 13px;border-radius:10px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx1);font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s}
.rx-in:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-m)}
.rx-in::placeholder{color:var(--tx3)}
.rx-go{flex-shrink:0;padding:9px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-size:13px;font-weight:600;font-family:inherit;color:#fff;transition:filter .15s,opacity .15s;
  background:linear-gradient(135deg,#4D8AFF 0%,#165DFF 100%)}
.rx-go:hover:not(:disabled){filter:brightness(1.07)}
.rx-go:disabled{opacity:.5;cursor:not-allowed}
.rx-reset{flex-shrink:0;padding:9px 12px;border-radius:10px;border:1px solid var(--brd);
  background:var(--bg0);color:var(--tx2);font-size:12.5px;font-family:inherit;cursor:pointer}
.rx-reset:hover{border-color:var(--acc-b);color:var(--tx1)}

/* 冷启动示例 chips */
.rx-egs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.rx-egs-l{font-size:11.5px;font-weight:600;color:var(--tx3);flex-shrink:0}
.rx-eg{font-size:12px;padding:4px 11px;border-radius:14px;cursor:pointer;font-family:inherit;
  border:1px dashed var(--acc-b);background:var(--bg0);color:var(--tx2);transition:all .15s}
.rx-eg:hover{border-style:solid;border-color:var(--acc);color:var(--acc)}

/* 加载态：一句正在做什么的实话 + 三点动画（比转圈更能说明它在比对什么） */
.rx-loading{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12.5px;color:var(--tx3)}
.rx-dots{display:inline-flex;gap:3px}
.rx-dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.35;
  animation:rx-bounce 1.1s ease-in-out infinite}
.rx-dots i:nth-child(2){animation-delay:.16s}
.rx-dots i:nth-child(3){animation-delay:.32s}
@keyframes rx-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.rx-err{margin-top:11px;font-size:12.5px;color:var(--danger,#dc2626);line-height:1.55}
.rx-mode{display:inline-block;margin-bottom:9px;font-size:11px;font-weight:600;padding:2px 9px;
  border-radius:9px;background:var(--bg2);color:var(--tx3)}
.rx-note{font-size:12.5px;color:var(--tx2);line-height:1.6;margin-bottom:10px}

/* 结果区 */
.rx-res{margin-top:13px;padding-top:13px;border-top:1px solid var(--acc-b)}
.rx-picks{display:flex;flex-direction:column;gap:9px}
.rx-pick{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:12px;
  border:1px solid var(--brd);background:var(--bg0);cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.rx-pick:hover{border-color:var(--acc-b);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.rx-rank{flex-shrink:0;width:19px;height:19px;border-radius:6px;margin-top:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;background:var(--acc-m);color:var(--acc)}
.rx-av{width:40px;height:40px;border-radius:11px;flex-shrink:0}
.rx-pick-main{flex:1;min-width:0}
.rx-pick-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.rx-pick-name{font-size:14px;font-weight:700;color:var(--tx1);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-fit{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:8px;white-space:nowrap;
  background:var(--bg2);color:var(--tx3)}
.rx-fit.hi{background:var(--ok-m,rgba(0,180,42,.12));color:var(--ok,#00B42A)}
.rx-pick-inst{font-size:11.5px;color:var(--tx3);margin-left:auto;white-space:nowrap}
/* 推荐理由是这个功能的**全部价值** —— 它必须比专家简介更显眼，而不是相反 */
.rx-why{font-size:12.5px;color:var(--tx1);line-height:1.6}
.rx-why b{font-weight:600;color:var(--tx2)}
.rx-sample{margin-top:6px;font-size:12px;color:var(--tx2);line-height:1.55;
  padding:6px 10px;border-radius:8px;background:var(--bg1);border:1px solid var(--brd)}
.rx-sample-l{font-size:10.5px;font-weight:600;color:var(--tx3);margin-right:6px}
.rx-acts{flex-shrink:0;display:flex;align-items:center;gap:6px;margin-top:6px}
.rx-done{font-size:11.5px;font-weight:600;color:var(--ok,#00B42A);white-space:nowrap;
  padding:4px 8px;border-radius:8px;background:var(--ok-m,rgba(0,180,42,.12))}

/* 没找到 —— 诚实地说没有，比硬凑三个不相干的专家好 */
.rx-none{padding:13px 14px;border-radius:11px;background:var(--bg0);border:1px dashed var(--brd)}
.rx-none-t{font-size:13px;font-weight:700;color:var(--tx1);margin-bottom:4px}
.rx-none-s{font-size:12.5px;color:var(--tx3);line-height:1.6}

@media(max-width:600px){
  .rx-go,.rx-reset{flex:1}
  .rx-in{min-width:100%}
  .rx-pick{flex-wrap:wrap;gap:9px}
  .rx-acts{width:100%;margin-top:2px}
  /* “已学会”是 span 不是 button，不跟着 flex:1 会和旁边的按钮一宽一窄 */
  .rx-acts .re-btn,.rx-acts .rx-done,.rx-acts .rm-mine{flex:1;text-align:center}
  .rx-pick-inst{margin-left:0}
}

/* ══ 版本历史（迁移 055）══ */
.re-verbtn{flex-shrink:0;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);transition:all .15s;font-family:inherit}
.re-verbtn:hover{border-color:var(--acc-b);color:var(--acc)}
.re-modal-ver{width:min(var(--dialog-form),calc(100vw - 2 * var(--dialog-gutter)));max-height:var(--dialog-max-height);display:flex;flex-direction:column}
.re-modal-ver .sp-timeline{overflow-y:auto;min-height:0}
.re-diff{margin-top:12px;border:1px solid var(--brd);border-radius:10px;background:var(--bg1);padding:12px 14px;overflow:auto}
.re-diff-h{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--tx1);margin-bottom:8px}
.re-diff-x{margin-left:auto;border:none;background:transparent;color:var(--tx3);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.re-diff-x:hover{color:var(--tx1)}
.re-diff-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;padding:4px 0;border-top:1px solid var(--brd);flex-wrap:wrap}
.re-diff-row:first-of-type{border-top:none}
.re-diff-k{flex:0 0 72px;color:var(--tx3);font-weight:600}
.re-diff-old{color:#cf222e;text-decoration:line-through;word-break:break-word}
.re-diff-arrow{color:var(--tx3)}
.re-diff-new{color:#1a7f37;font-weight:500;word-break:break-word}
.re-diff-skills{display:flex;flex-wrap:wrap;gap:4px}
.re-diff-sk{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px}
.re-diff-sk.add{background:var(--ok-m);color:var(--ok)}
.re-diff-sk.del{background:var(--err-m,rgba(220,38,38,.1));color:#cf222e;text-decoration:line-through}
.re-diff-persona{margin-top:8px}
.re-diff-pre{margin:6px 0 0;max-height:260px;overflow:auto;background:var(--bg0);border:1px solid var(--brd);
  border-radius:8px;font-family:var(--mono);font-size:11px;line-height:1.55}
.re-diff-ln{padding:0 8px;white-space:pre-wrap;word-break:break-word}
.re-diff-ln.add{background:rgba(0,180,42,.10);color:#1a7f37}
.re-diff-ln.del{background:rgba(219,40,40,.09);color:#cf222e}
.re-diff-ln.hunk{background:var(--bg2);color:var(--tx3)}

/* ══ 二分屏编辑器 ══ */
.re{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg0);animation:slideUp .18s ease-out}
.re-bar{height:54px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 20px;
  border-bottom:1px solid var(--brd);background:var(--bg0)}
.re-back{font-size:13px;font-weight:600;color:var(--tx2);background:transparent;border:none;cursor:pointer;
  padding:6px 10px;border-radius:8px;font-family:inherit}
.re-back:hover{background:var(--bg2);color:var(--tx1)}
.re-bar-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--tx1);min-width:0}
.re-bar-ico{width:28px;height:28px;border-radius:8px;flex-shrink:0;background:var(--acc-m);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.re-bar-name{font-size:12px;color:var(--tx3);font-weight:400;background:var(--bg2);padding:3px 9px;
  border-radius:6px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-bar-spacer{flex:1}
.re-dirty{font-size:12px;font-weight:600;color:var(--warn)}
.re-clean{font-size:12px;color:var(--tx3)}
.re-save{font-size:13px;font-weight:600;padding:8px 20px;border-radius:9px;border:none;cursor:pointer;
  background:var(--acc);color:#fff;font-family:inherit}
.re-save:hover:not(:disabled){filter:brightness(1.06)}
.re-save:disabled{opacity:.5;cursor:not-allowed}

.re-split{flex:1;display:flex;min-height:0;background:var(--brd)}
.re-pane{background:var(--bg0);display:flex;flex-direction:column;min-width:0;min-height:0}
.re-pane+.re-pane{border-left:1px solid var(--brd)}
.re-pane-form{width:520px;flex-shrink:0;position:relative;background:var(--bg1)}
.re-pane-test{flex:1;min-width:0;background:var(--bg0)}
.re-resize{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:6}
.re-resize::after{content:"";position:absolute;right:2px;top:0;width:2px;height:100%;background:transparent;transition:background .15s}
.re-resize:hover::after{background:var(--acc-b)}

.re-phead{height:44px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-bottom:1px solid var(--brd);font-size:13px;font-weight:700;color:var(--tx1)}
.re-phead-ico{font-size:14px}
.re-phead-test{color:var(--tx1)}
.re-phead-tip{font-weight:400;font-size:11.5px;color:var(--tx3);margin-left:auto}

/* 表单滚动区 */
.re-form{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.re-sec{background:var(--bg0);border:1px solid var(--brd);border-radius:12px;padding:14px 16px}
.re-sec-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--tx1);margin-bottom:4px}
.re-sec-ic{font-size:15px}
.re-sec-count{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tx3);background:var(--bg2);padding:1px 9px;border-radius:10px}
.re-sec-opt{font-size:11px;font-weight:500;color:var(--tx3);background:var(--bg2);padding:1px 8px;border-radius:9px}
.re-sec-sub{font-size:11.5px;color:var(--tx3);line-height:1.5;margin-bottom:10px}
.re-field{margin-bottom:12px}
.re-field:last-child{margin-bottom:0}
.re-label{display:block;font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:5px}
.re-label-hint{display:block;font-size:11px;font-weight:400;color:var(--tx3);margin-top:2px;line-height:1.4}
.re-input{width:100%;box-sizing:border-box;font-size:13px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--brd);background-color:var(--bg1);color:var(--tx1);font-family:inherit;transition:border-color .15s}
.re-input:focus{outline:none;border-color:var(--acc);background-color:var(--bg0)}
.re-ta{resize:vertical;line-height:1.55}
/* 下拉框外观由“表单控件基座”统一提供，这里不再重复；尺寸档也在基座区块 */

/* 直接上传技能（文件 / 文件夹）并自动绑定 */
.re-skill-upload{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.re-upl-btn{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;
  border:1px dashed var(--brd);background:var(--bg1);color:var(--tx2);transition:all .12s;white-space:nowrap}
.re-upl-btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc);background:var(--acc-m)}
.re-upl-btn:disabled{opacity:.55;cursor:default}
.re-upl-hint{font-size:11px;color:var(--tx3);flex:1 1 100%;line-height:1.4}

/* AI 一键生成人设（提示词区右上角按钮）*/
.re-gen-btn{margin-left:auto;font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;
  cursor:pointer;border:1px solid var(--acc);background:var(--acc);color:#fff;
  transition:filter .12s,opacity .12s;white-space:nowrap}
.re-gen-btn:hover:not(:disabled){filter:brightness(1.06)}
.re-gen-btn:disabled{opacity:.5;cursor:not-allowed}

.re-skill-list{max-height:200px;overflow-y:auto;border:1px solid var(--brd);border-radius:10px;
  padding:6px;background:var(--bg1);display:flex;flex-direction:column;gap:3px}
.re-skill{display:flex;align-items:center;gap:9px;font-size:13px;padding:7px 9px;border-radius:8px;
  cursor:pointer;color:var(--tx1);transition:background .12s}
.re-skill:hover{background:var(--bg2)}
.re-skill.on{background:var(--acc-m)}
.re-skill-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-tag{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:9px;background:var(--purple-m);color:var(--purple)}
/* 专家独立技能集（迁移 053）：条目 = 名称 + 标签 + 移除按钮（非 checkbox） */
.re-skill-missing{opacity:.7}
.re-tag-warn{background:#fef3c7;color:#b45309}
.re-skill-rm{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;cursor:pointer;
  border:1px solid var(--brd);background:var(--bg1);color:var(--tx2);flex:0 0 auto}
.re-skill-rm:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.re-skill-disabled{opacity:.5;cursor:default}
/* 技能改动“暂存”态（点保存才生效）：待添加 = 虚线描边；待移除 = 划掉 + 变淡 */
.re-skill-addpend{background:var(--warn-m);border:1px dashed var(--warn)}
.re-skill-rmpend{opacity:.55}
.re-skill-rmpend .re-skill-name{text-decoration:line-through}
.re-tag-stage{background:var(--warn-m);color:var(--warn)}
.re-stage-flag{margin-left:8px;font-size:10.5px;font-weight:700;padding:1px 8px;
  border-radius:9px;background:var(--warn-m);color:var(--warn)}
.re-stage-note{font-size:12px;color:var(--warn);line-height:1.5;margin:0 0 8px}
/* “从我的技能库导入”弹层 */
.re-modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.re-modal{background:var(--bg0);border:1px solid var(--brd);border-radius:14px;
  width:min(var(--dialog-form),100%);max-height:var(--dialog-max-height);display:flex;flex-direction:column;gap:10px;
  padding:var(--dialog-padding);overflow-y:auto;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.re-modal-h{font-size:15px;font-weight:700;color:var(--tx1);display:flex;flex-direction:column;gap:3px}
.re-modal-sub{font-size:12px;font-weight:400;color:var(--tx3)}
.re-modal-list{max-height:46vh}
.re-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}

.re-exec-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.re-exec-row .re-select{width:auto;min-width:200px;flex:0 1 auto}
.re-inline-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2);cursor:pointer;white-space:nowrap}
.re-inline-lbl{color:var(--tx3)}

.re-switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding-top:10px;margin-top:2px;border-top:1px dashed var(--brd)}
.re-switch-txt{display:flex;flex-direction:column;gap:2px}
.re-switch-txt b{font-size:12.5px;font-weight:600;color:var(--tx1)}
.re-switch-sub{font-size:11px;color:var(--tx3)}

.re-err{font-size:12.5px;color:#d33;padding:8px 12px;background:rgba(220,38,38,.08);border-radius:8px}
/* 导入 .expert 包后的降级说明（缺失的预置、被跳过的目录…）——不是错误，只是要说清楚 */
.re-warn-list{margin:4px 0 0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--tx2)}
.re-warn-list li{margin:2px 0}

/* ── 专家包批量导入（static/js/ExpertImport.js）──────────────────────
   拖拽落区：浮层用 portal 渲染进父面板给的容器，故它必须是定位上下文。
   高亮态复用技能列表的 .sp-list-dragover（本文件顶部）。 */
.re-dropzone{position:relative}
.re-modal-wide{width:min(var(--dialog-reading),100%)}
.re-btn.xs{padding:3px 10px;font-size:11.5px;font-weight:600}
.re-dup-all{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--tx3)}
.re-dup-list{overflow-y:auto;max-height:46vh;display:flex;flex-direction:column;gap:8px;
  margin:0 -2px;padding:0 2px}
.re-dup{border:1px solid var(--brd);border-radius:10px;padding:10px 12px}
.re-dup.off{opacity:.55}
.re-dup-name{font-size:13.5px;font-weight:600;color:var(--tx1);word-break:break-all}
.re-dup-src{font-size:11.5px;color:var(--tx3);margin:2px 0 8px;word-break:break-all}
.re-dup-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.re-dup-opt{padding:4px 10px;border-radius:7px;font-size:12px;cursor:pointer;
  border:1px solid var(--brd);background:var(--bg1);color:var(--tx2)}
.re-dup-opt:hover{border-color:var(--acc-b);color:var(--tx1)}
.re-dup-opt.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.re-dup-sel{width:auto;max-width:220px;padding:4px 8px;font-size:12px}
.re-dup-note{font-size:12.5px;line-height:1.6;color:var(--tx2);padding:8px 12px;
  border-radius:8px;background:var(--warn-m);border:1px solid var(--warn)}
/* 批量导入进度：非阻塞（导入中用户还能翻列表），故不做遮罩 */
.re-imp-prog{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:8px;max-width:min(520px,92vw);
  padding:9px 16px;border-radius:999px;font-size:12.5px;color:var(--tx1);
  background:var(--bg0);border:1px solid var(--brd);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.re-imp-name{color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-imp-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0;
  animation:spBounce 1s ease-in-out infinite}

/* 右栏调试台容器 */
.re-pg-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.re-pg-wrap .pg-panel{flex:1;min-height:0}
.re-test-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 32px;gap:8px}
.re-test-empty-ic{font-size:40px;opacity:.7;margin-bottom:4px}
.re-test-empty-t{font-size:15px;font-weight:700;color:var(--tx1)}
.re-test-empty-d{font-size:12.5px;color:var(--tx3);line-height:1.6;max-width:380px;margin-bottom:8px}

/* 窄屏堆叠 */
@media(max-width:960px){
  .re-split.stacked{flex-direction:column;overflow-y:auto}
  .re-split.stacked .re-pane{border-left:none!important;border-bottom:1px solid var(--brd)}
  .re-pane-form{width:100%!important;height:auto;max-height:none}
  .re-pane-test{min-height:70vh}
}

/* ══════════════════════════════════════════════════════════════════════
   表单控件统一重设计 —— 下拉框 / 勾选框 / 开关 / 按钮
   覆盖：调试台参数栏(.pg-*)、专家编辑器(.re-*)、技能列表排序 / AI 助手模型选择。
   全部用设计系统 tokens，明暗自适应；纯 CSS（不改 JS）。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 下拉框基座：skills 页**所有** <select> 统一（去原生外观 + 自绘箭头）。
   刻意用 .skills-page（低优先级 0,1,1）：足以压过各控件的 background 简写底色，
   又低于特例（.login-agree / .re-switch 开关，均 0,2,1）不会误伤它们。各控件只需
   用普通类选择器微调尺寸即可。新增下拉框自动套用，无需改这里。
   另外挂 .ske / .pg-panel（编辑器 / 调试台组件根，同 0,1,1 特异性）：让这两个
   组件被别处复用（如团队技能 .tm-ske-host 全屏宿主，没有 .skills-page 祖先）时，
   下拉框 / 勾选框仍与个人 Skills 页逐像素一致，不回退浏览器原生外观。 */
.skills-page select,.ske select,.pg-panel select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:inherit;font-size:13px;color:var(--tx1);background-color:var(--bg1);
  padding:7px 30px 7px 11px;border:1px solid var(--brd);border-radius:8px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color .15s,box-shadow .15s,background-color .15s;outline:none;
}
.skills-page select:hover,.ske select:hover,.pg-panel select:hover{border-color:var(--acc-b);background-color:var(--bg0)}
.skills-page select:focus,.ske select:focus,.pg-panel select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-m)}
.skills-page select:disabled,.ske select:disabled,.pg-panel select:disabled{opacity:.55;cursor:not-allowed}
/* 尺寸档（语境微调，仅覆盖尺寸）：调试台紧凑 / 编辑器常规 / 强度小 / 排序最小 */
.pg-param select{font-size:12px;padding:6px 28px 6px 10px;min-width:96px}
.re-select{font-size:13px;padding:8px 32px 8px 12px}
.re-select-sm,.re-exec-row .re-select-sm{min-width:0;width:auto;padding:6px 26px 6px 10px;font-size:12.5px}
.ske-model-sel{font-size:12px;padding:6px 28px 6px 10px}
.sp-sort select{font-size:12px;padding:5px 26px 5px 9px;background-position:right 7px center}

/* ── 勾选框基座：skills 页**所有** <input type=checkbox> 统一（去原生 + 自绘对勾）。
   例外（优先级更高、自动不受影响）：登录合规勾选 .login-agree（自身设计）、
   执行过程开关 .re-switch（渲染成 toggle，见下）。新增勾选框自动套用。
   同上：另挂 .ske / .pg-panel 组件根，让复用到无 .skills-page 祖先的宿主（团队技能
   .tm-ske-host）时勾选框仍是自绘对勾，与个人页一致。 */
.skills-page input[type=checkbox],.ske input[type=checkbox],.pg-panel input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;position:relative;
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--brd);
  background:var(--bg0);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;
}
.skills-page input[type=checkbox]:hover,.ske input[type=checkbox]:hover,.pg-panel input[type=checkbox]:hover{border-color:var(--acc)}
.skills-page input[type=checkbox]:checked,.ske input[type=checkbox]:checked,.pg-panel input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.skills-page input[type=checkbox]:checked::after,.ske input[type=checkbox]:checked::after,.pg-panel input[type=checkbox]:checked::after{
  content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.skills-page input[type=checkbox]:focus-visible,.ske input[type=checkbox]:focus-visible,.pg-panel input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--acc-m)}
.skills-page input[type=checkbox]:disabled,.ske input[type=checkbox]:disabled,.pg-panel input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}

/* ── 开关（“向使用者展示执行过程” 用真开关，比勾选框更贴切）。
   本身也是 checkbox，故显式 border:none 覆盖上面勾选框基座的边框与对勾。──────── */
.re-switch input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;flex-shrink:0;position:relative;
  width:38px;height:22px;border:none;border-radius:22px;background:var(--bg3);cursor:pointer;
  transition:background .18s;outline:none}
.re-switch input[type=checkbox]::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border:none;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.re-switch input[type=checkbox]:checked{background:var(--acc)}
/* 显式重申圆形滑块几何：胜过勾选框基座在 :checked::after 上画的对勾（同优先级，此处靠后取胜） */
.re-switch input[type=checkbox]:checked::after{
  top:2px;left:2px;width:18px;height:18px;border:none;border-radius:50%;background:#fff;
  transform:translateX(16px)}
.re-switch input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--acc-m)}

/* ── 调试台按钮（.pg-panel 内的 .mb）：更轻的幽灵按钮，与新控件同一语言 ── */
.pg-panel .mb{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--brd);background:var(--bg0);color:var(--tx2);
  transition:border-color .15s,color .15s,background-color .15s,box-shadow .15s;box-shadow:none}
.pg-panel .mb:hover{border-color:var(--acc-b);color:var(--tx1);background:var(--bg1);transform:none}
.pg-panel .mb.s{background:var(--bg0);color:var(--tx2)}
.pg-panel .mb.s:hover{background:var(--bg1);color:var(--tx1)}
.pg-panel .mb.p{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 2px 8px var(--acc-m)}
.pg-panel .mb.p:hover{filter:brightness(1.06);background:var(--acc);border-color:var(--acc)}
/* AI 示例填充按钮（细体、可换行的长文本）保持轻量 */
.pg-samples .mb.s{font-weight:600}

/* ── 卡片按钮 active 微交互 ── */
.re-btn:active:not(:disabled),.re-save:active:not(:disabled){transform:translateY(1px)}

/* ═══════════════════════════════════════════════════════════════════
   Skill 管理空间（docs/skill-workspace-design.md §11）
   仅在 SKILL_SPACE_ENABLED 开启时渲染；生产侧这些类名不会出现在 DOM 里。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 左导航 ─────────────────────────────────────────────────────── */
.spx-nav{position:fixed;left:0;top:0;bottom:0;width:184px;z-index:30;
  background:var(--bg2);border-right:1px solid var(--brd);
  display:flex;flex-direction:column;gap:2px;padding:14px 10px;overflow-y:auto}
.spx-nav-brand{font-weight:700;font-size:14px;color:var(--tx1);padding:4px 8px 12px}
.spx-nav-group{font-size:10px;color:var(--tx3);padding:12px 8px 4px;letter-spacing:.5px}
.spx-nav button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;
  border-radius:8px;background:transparent;color:var(--tx2);font-size:12px;cursor:pointer;
  font-family:inherit;transition:background .15s}
.spx-nav button:hover{background:var(--acc-m)}
.spx-nav button.on{background:var(--acc-m);color:var(--acc);font-weight:600}
.spx-nav-team{width:100%;margin:2px 0 6px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--brd);background:var(--bg1);color:var(--tx2);font-size:11px;
  font-family:inherit}
.spx-nav-back{padding:8px 10px;color:var(--tx3);font-size:11px;text-decoration:none}
.spx-nav-back:hover{color:var(--acc)}
/* 左导航存在时给主区域让位 */
body:has(.spx-nav) .sp-header,
body:has(.spx-nav) .sp-listpage,
body:has(.spx-nav) .spx-preview,
body:has(.spx-nav) .spx-review{margin-left:184px}

/* ── 状态徽标 ───────────────────────────────────────────────────── */
.spx-status{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;
  font-weight:600;background:var(--bg3);color:var(--tx3);white-space:nowrap}
.spx-status.warn{background:#FFF4E5;color:#B76E00}
.spx-status.bad{background:#FFECEC;color:#C62828}
.spx-status.info{background:#E8F3FF;color:#1565C0}
.spx-status.good{background:#E9F7EF;color:#1B7F3B}
.sp-item-badge.synced{background:#E9F7EF;color:#1B7F3B;border-color:#BFE6CD}
.sp-item-badge.unsynced{background:var(--bg3);color:var(--tx3)}
.sp-item-badge.upd{background:#FFF4E5;color:#B76E00;border-color:#F5D6A8}
.spx-ver{font-size:10px;color:var(--tx3);font-family:var(--mono,monospace)}
.spx-tag{font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;
  background:var(--acc-m);color:var(--acc)}
.spx-tag.bad{background:#FFECEC;color:#C62828}
.spx-tag.mine{background:var(--acc-m);color:var(--acc)}

/* ── 弹窗通用 ───────────────────────────────────────────────────── */
.spx-modal .spx-sub{font-size:12px;color:var(--tx3);margin:2px 0 14px;line-height:1.6}
.spx-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:10px;
  border:1px solid var(--brd);border-radius:10px;cursor:pointer;transition:all .15s}
.spx-opt:hover{border-color:var(--acc-b)}
.spx-opt.on{border-color:var(--acc);background:var(--acc-m)}
.spx-opt.disabled{opacity:.5;cursor:not-allowed}
.spx-opt-t{font-size:13px;font-weight:600;color:var(--tx1)}
.spx-opt-d{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.6}
.spx-warn{font-size:11px;color:#B76E00;margin-top:4px}
.spx-select{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin-top:8px;padding:8px 10px;border:1px solid var(--brd);border-radius:8px;
  background:var(--bg1);color:var(--tx2);font-size:12px;cursor:pointer;font-family:inherit}
.spx-select:hover{border-color:var(--acc-b)}
.spx-select-arrow{color:var(--tx3)}
.spx-field{margin:12px 0}
.spx-field label{display:block;font-size:12px;font-weight:600;color:var(--tx1);margin-bottom:5px}
.spx-field input,.spx-field textarea{width:100%;padding:8px 10px;border:1px solid var(--brd);
  border-radius:8px;background:var(--bg1);color:var(--tx1);font-size:12px;font-family:inherit}
.spx-req{color:#C62828}
.spx-cur{font-weight:400;color:var(--tx3);margin-left:8px;font-size:11px}
.spx-note{font-size:12px;color:var(--tx2);background:var(--bg3);padding:8px 10px;
  border-radius:8px;margin-bottom:10px}

/* ── 半屏抽屉选择器（PRD 批注 10/11）───────────────────────────── */
.spx-drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:1200}
.spx-drawer{position:fixed;right:0;top:0;bottom:0;width:min(460px,86vw);z-index:1201;
  background:var(--bg1);border-left:1px solid var(--brd);display:flex;flex-direction:column;
  box-shadow:-8px 0 28px rgba(0,0,0,.12)}
.spx-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--brd);font-weight:700;color:var(--tx1)}
.spx-x{border:0;background:transparent;font-size:20px;color:var(--tx3);cursor:pointer}
.spx-drawer-search{padding:12px 18px}
.spx-drawer-search input{width:100%;padding:9px 12px;border:1px solid var(--brd);
  border-radius:8px;background:var(--bg2);color:var(--tx1);font-size:13px;font-family:inherit}
.spx-drawer-body{flex:1;overflow-y:auto;padding:0 12px 16px}
.spx-pick{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:6px;
  border:1px solid var(--brd);border-radius:10px;cursor:pointer}
.spx-pick:hover{border-color:var(--acc-b)}
.spx-pick.on{border-color:var(--acc);background:var(--acc-m)}
.spx-pick-main{flex:1;min-width:0}
.spx-pick-name{display:block;font-size:13px;color:var(--tx1);font-weight:600}
.spx-pick-desc{display:block;font-size:11px;color:var(--tx3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spx-pick-side{display:flex;gap:6px;align-items:center;flex-shrink:0}

/* ── 绑定技能策略表 ─────────────────────────────────────────────── */
.spx-strategy{margin:14px 0;border:1px solid var(--brd);border-radius:10px;padding:12px}
.spx-strategy-t{font-size:13px;font-weight:700;color:var(--tx1);margin-bottom:8px}
.spx-table{width:100%;border-collapse:collapse;font-size:12px}
.spx-table th{text-align:left;padding:8px;color:var(--tx3);font-weight:600;
  border-bottom:1px solid var(--brd);font-size:11px}
.spx-table td{padding:9px 8px;border-bottom:1px solid var(--brd);color:var(--tx2);
  vertical-align:middle}
.spx-table.wide td,.spx-table.wide th{white-space:nowrap}
.spx-skname{font-weight:600;color:var(--tx1)}
.spx-srow{display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--brd)}
.spx-mini{padding:4px 12px;margin-right:6px;border:1px solid var(--brd);border-radius:6px;
  background:var(--bg1);color:var(--tx2);font-size:11px;cursor:pointer;font-family:inherit}
.spx-mini.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.spx-strategy-ok{color:#1B7F3B;font-size:11px;margin-left:6px}
.spx-strategy-todo{color:#B76E00;font-size:11px;margin-left:6px}
.spx-hint{font-size:11px;color:var(--tx3);margin-top:10px;line-height:1.7}

/* ── “可拉取”横幅 ─────────────────────────────────────────────── */
.spx-banner{display:flex;align-items:center;gap:10px;margin:0 24px 12px;
  padding:10px 14px;border-radius:10px;background:#FFF4E5;border:1px solid #F5D6A8;
  color:#B76E00;font-size:12px}
.spx-banner-btn{padding:4px 12px;border:1px solid #B76E00;border-radius:6px;
  background:transparent;color:#B76E00;font-size:11px;cursor:pointer;font-family:inherit}
.spx-banner-x{margin-left:auto;border:0;background:transparent;color:#B76E00;
  font-size:16px;cursor:pointer}

/* ── 团队空间预览页 ─────────────────────────────────────────────── */
.spx-preview{padding:0 0 32px}
.spx-preview-top{display:flex;align-items:center;gap:10px;padding:14px 24px;
  border-bottom:1px solid var(--brd);position:sticky;top:0;background:var(--bg1);z-index:10}
.spx-preview-title{display:flex;align-items:center;gap:8px;min-width:0}
.spx-preview-kind{font-size:12px;color:var(--tx3)}
.spx-preview-name{font-size:15px;font-weight:700;color:var(--tx1)}
.spx-readonly-tip{margin:12px 24px;padding:9px 12px;border-radius:8px;
  background:var(--bg3);color:var(--tx3);font-size:11px;line-height:1.7}
.spx-reject{margin:12px 24px 0;padding:10px 12px;border-radius:8px;
  background:#FFECEC;border:1px solid #F5C6C6;color:#C62828;font-size:12px}
.spx-preview-body{padding:0 24px}
.spx-sec{margin-bottom:20px}
.spx-sec h4{font-size:12px;color:var(--tx3);margin:0 0 6px;font-weight:600}
.spx-sec p{font-size:13px;color:var(--tx2);line-height:1.8;margin:0}
.spx-pre{white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.8;
  background:var(--bg2);border:1px solid var(--brd);border-radius:10px;padding:14px;
  color:var(--tx2);max-height:50vh;overflow:auto;font-family:var(--mono,monospace)}
.spx-files{margin:0;padding-left:18px;font-size:12px;color:var(--tx2);line-height:1.9}
.spx-caps{display:flex;flex-wrap:wrap;gap:6px}
.spx-cap{padding:3px 9px;border-radius:6px;background:var(--acc-m);color:var(--acc);
  font-size:11px}

/* ── 协作面板 ───────────────────────────────────────────────────── */
.spx-pop-scrim{position:fixed;inset:0;z-index:1100}
.spx-pop{position:absolute;right:24px;top:56px;z-index:1101;width:300px;
  background:var(--bg1);border:1px solid var(--brd);border-radius:12px;padding:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.14)}
.spx-pop-head{display:flex;align-items:center;justify-content:space-between;
  font-weight:700;color:var(--tx1);font-size:13px;margin-bottom:10px}
.spx-switch{width:38px;height:21px;border-radius:11px;border:0;background:var(--bg3);
  position:relative;cursor:pointer;transition:background .15s}
.spx-switch.on{background:var(--acc)}
.spx-switch span{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:left .15s}
.spx-switch.on span{left:19px}
.spx-pop-label{font-size:11px;color:var(--tx3);margin:8px 0 6px}
.spx-avatars{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.spx-av{position:relative;width:26px;height:26px;border-radius:50%;background:var(--acc);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.spx-av-x{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;
  border:0;background:#C62828;color:#fff;font-size:9px;line-height:1;cursor:pointer;padding:0}
.spx-pop-add{display:flex;gap:6px;margin-top:10px}
.spx-pop-add input{flex:1;padding:6px 9px;border:1px solid var(--brd);border-radius:8px;
  background:var(--bg2);color:var(--tx1);font-size:12px;font-family:inherit}
.spx-cands{max-height:150px;overflow-y:auto;margin-top:6px}
.spx-cand{padding:7px 9px;border-radius:7px;font-size:12px;color:var(--tx2);cursor:pointer}
.spx-cand:hover{background:var(--acc-m)}
.spx-cand.on{background:var(--acc-m);color:var(--acc);font-weight:600}

/* ── 空间审核 ───────────────────────────────────────────────────── */
.spx-review{padding:18px 24px 40px}
.spx-rtabs{display:flex;gap:6px;margin-bottom:14px}
.spx-rtabs button{padding:7px 16px;border:1px solid var(--brd);border-radius:8px;
  background:transparent;color:var(--tx2);font-size:12px;cursor:pointer;font-family:inherit}
.spx-rtabs button.on{border-color:var(--acc);color:var(--acc);background:var(--acc-m);
  font-weight:600}
.spx-subtabs{display:flex;gap:14px;margin-bottom:12px;border-bottom:1px solid var(--brd)}
.spx-subtabs button{padding:8px 2px;border:0;border-bottom:2px solid transparent;
  background:transparent;color:var(--tx3);font-size:12px;cursor:pointer;font-family:inherit}
.spx-subtabs button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.spx-cnt{margin-left:3px;color:var(--tx3);font-size:11px}
.spx-tablewrap{overflow-x:auto;border:1px solid var(--brd);border-radius:10px}
.spx-no{font-family:var(--mono,monospace);color:var(--tx3);font-size:11px}
.sp-tbtn.sm{padding:3px 10px;font-size:11px;margin-right:4px}
.sp-tbtn.ok{background:#1B7F3B;color:#fff;border-color:#1B7F3B}
.sp-tbtn.danger{color:#C62828;border-color:#F5C6C6}

/* ── 杂项 ───────────────────────────────────────────────────────── */
.spx-spin{width:20px;height:20px;margin:18px auto;border-radius:50%;
  border:2px solid var(--brd);border-top-color:var(--acc);animation:spx-rot .8s linear infinite}
@keyframes spx-rot{to{transform:rotate(360deg)}}
.spx-empty{padding:34px 0;text-align:center;color:var(--tx3);font-size:12px}

@media(max-width:860px){
  .spx-nav{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--brd)}
  .spx-nav-brand,.spx-nav-group{padding:4px 8px}
  .spx-nav-team{width:auto}
  body:has(.spx-nav) .sp-header,
  body:has(.spx-nav) .sp-listpage,
  body:has(.spx-nav) .spx-preview,
  body:has(.spx-nav) .spx-review{margin-left:0}
}

/* 专家广场的分类树：横排（专家总量比技能小一个数量级，撑不起整条左栏）。
   组件与技能广场共用 CategoryRail，只靠这层布局改成横向。 */
.rm-cats{margin-bottom:10px}
.rm-cats .ctr{flex-direction:row;flex-wrap:wrap;gap:6px}
.rm-cats .ctr-group{flex-direction:row;flex-wrap:wrap;gap:6px}
.rm-cats .ctr-row{width:auto;border:1px solid var(--brd);border-radius:999px;padding:4px 11px}
.rm-cats .ctr-l2{padding-left:11px}
.rm-cats .ctr-row.on{border-color:var(--acc-b)}