@fenglimg/cocos-state-controller 0.1.0

package/packages/state-controller-v2-panel/panel/styles.css

@@ -0,0 +1,454 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap');
+
+/* ============================================================
+   State Controller 面板 — Neo-Brutalist Pop (撞色新丑)
+   设计源: .workflow/.scratchpad/mockups/style-2.html
+   ============================================================ */
+
+:host {
+    --bg-main: #FFFDF3;
+    --bg-card: #FFFFFF;
+    --primary: #FFDE4D;
+    --accent-pink: #FF6B6B;
+    --accent-green: #6BCB77;
+    --accent-blue: #4D96FF;
+    --text-main: #000000;
+    --text-dim: #555555;
+    --border-thick: 3px solid #000000;
+    --border-thin: 2px solid #000000;
+    --shadow-hard: 4px 4px 0px #000000;
+    --shadow-hard-lg: 6px 6px 0px #000000;
+    --transition: all 0.13s ease-in-out;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-family: 'Space Grotesk', sans-serif;
+    color: var(--text-main);
+    font-size: 13px;
+}
+
+* { box-sizing: border-box; }
+
+.panel-shell {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-main);
+    overflow: hidden;
+}
+
+/* ---------- 顶部导航 ---------- */
+.top-nav {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    background: var(--primary);
+    border-bottom: var(--border-thick);
+    flex-wrap: wrap;
+}
+.nav-tabs { display: flex; gap: 8px; }
+.tab-btn {
+    font-family: 'Syne', sans-serif;
+    font-weight: 800;
+    font-size: 14px;
+    text-transform: uppercase;
+    padding: 7px 14px;
+    background: var(--bg-card);
+    border: var(--border-thick);
+    box-shadow: var(--shadow-hard);
+    cursor: pointer;
+    transition: var(--transition);
+}
+.tab-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-lg); }
+.tab-btn.is-active { background: var(--accent-blue); color: #fff; }
+.nav-actions { display: flex; align-items: center; gap: 10px; }
+.actions-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+.field-label {
+    font-size: 11px; font-weight: 700; text-transform: uppercase;
+    color: #000; opacity: .7;
+}
+.toggle-label { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; cursor: pointer; }
+.toggle-group { display: flex; gap: 10px; }
+.toggle-group.is-disabled { opacity: .4; pointer-events: none; }
+/* 撞色新丑风勾选框 (替代默认蓝勾, 配合黄底 nav) */
+.toggle-label input[type="checkbox"] {
+    -webkit-appearance: none; appearance: none;
+    width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
+    background: #fff; border: var(--border-thin); box-shadow: 2px 2px 0 #000;
+    cursor: pointer; position: relative; transition: var(--transition);
+}
+.toggle-label input[type="checkbox"]:checked { background: var(--accent-green); }
+.toggle-label input[type="checkbox"]:checked::after {
+    content: '✓'; position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 800; color: #000;
+}
+.toggle-label input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
+
+/* ---------- 通用 NB 控件 ---------- */
+.nb-btn {
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 700; font-size: 13px;
+    padding: 6px 12px;
+    background: var(--bg-card);
+    border: var(--border-thin);
+    box-shadow: 2px 2px 0px #000;
+    cursor: pointer;
+    transition: var(--transition);
+}
+.nb-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0px #000; background: var(--primary); }
+.nb-btn:active:not(:disabled) { transform: translate(1px,1px); box-shadow: none; }
+.nb-btn:disabled, .nb-btn.is-disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
+.nb-btn-primary { background: var(--accent-green); }
+.btn-wide { width: 100%; }
+.btn-icon { padding: 6px 9px; }
+.btn-small { padding: 3px 8px; font-size: 11px; box-shadow: 2px 2px 0 #000; }
+.nb-select, .nb-input {
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 600; font-size: 12px;
+    padding: 6px 10px;
+    background: var(--bg-card);
+    border: var(--border-thin);
+    box-shadow: 2px 2px 0px #000;
+}
+.nb-input { min-width: 160px; }
+.nb-input:focus, .nb-select:focus { outline: none; background: #fffdf3; }
+
+/* ---------- 视图容器 ---------- */
+.view-container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+
+/* ====================================================
+   观测总览
+   ==================================================== */
+#view-overview { padding: 14px; gap: 14px; overflow: auto; }
+
+/* 仪表盘 */
+.dashboard-grid {
+    flex: 0 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 12px;
+}
+.db-card {
+    background: var(--bg-card);
+    border: var(--border-thick);
+    box-shadow: var(--shadow-hard);
+    padding: 12px 14px;
+    cursor: pointer;
+    transition: var(--transition);
+}
+.db-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard-lg); }
+.db-card.active { background: var(--primary); }
+.db-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.db-value { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
+.db-state-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.status-dot { width: 12px; height: 12px; border: 2px solid #000; border-radius: 50%; flex: 0 0 auto; background: var(--accent-green); }
+.status-dot.recording { background: var(--accent-pink); }
+
+/* 主体三栏 */
+.overview-body {
+    flex: 1; min-height: 280px;
+    display: grid;
+    grid-template-columns: minmax(220px, 280px) 1fr minmax(200px, 260px);
+    gap: 14px;
+}
+@media (max-width: 900px) { .overview-body { grid-template-columns: 1fr; } }
+
+.panel-cap {
+    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px;
+    text-transform: uppercase; padding: 8px 12px;
+    background: var(--primary); border: var(--border-thick); border-bottom: none;
+}
+
+/* 拓扑树 */
+.topology-panel { display: flex; flex-direction: column; min-height: 0; }
+.topology-tree {
+    flex: 1; min-height: 0; overflow: auto;
+    background: var(--bg-card);
+    border: var(--border-thick);
+    box-shadow: var(--shadow-hard);
+    padding: 8px;
+}
+.tree-ctrl {
+    display: flex; align-items: center; gap: 6px;
+    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px;
+    padding: 8px 8px; margin-top: 4px;
+    background: var(--accent-blue); color: #fff;
+    border: var(--border-thin); cursor: pointer;
+    box-shadow: 2px 2px 0 #000;
+}
+.tree-ctrl:first-child { margin-top: 0; }
+.tree-ctrl.collapsed .tree-caret { transform: rotate(-90deg); }
+.tree-caret { display: inline-block; transition: var(--transition); font-size: 11px; }
+.tree-ctrl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tree-node {
+    display: flex; align-items: center; gap: 6px;
+    font-weight: 700; padding: 6px 8px; margin: 4px 0 2px 10px;
+    background: #fff; border: var(--border-thin); cursor: pointer;
+    transition: var(--transition);
+}
+.tree-node:hover { background: var(--primary); transform: translate(-1px,-1px); }
+.tree-node.is-selected { background: var(--primary); box-shadow: 2px 2px 0 #000; }
+.tree-node-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tree-prop {
+    display: flex; align-items: center; justify-content: space-between; gap: 6px;
+    padding: 4px 8px 4px 28px; margin-left: 10px;
+    font-size: 12px; cursor: pointer; border-left: var(--border-thin);
+}
+.tree-prop:hover { background: #f4f4f4; }
+.tree-prop.is-selected { background: #fff9e6; font-weight: 700; }
+.tree-prop-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.kind-badge {
+    font-size: 10px; font-weight: 700; text-transform: uppercase;
+    padding: 1px 6px; border: 1.5px solid #000; border-radius: 4px; flex: 0 0 auto;
+}
+.kind-badge.tracked { background: var(--accent-green); }
+.kind-badge.loose { background: var(--primary); }
+.kind-badge.excluded { background: #e5e5e5; color: #555; }
+.kind-badge.mixed { background: var(--accent-pink); }
+
+/* 值矩阵 */
+.matrix-container {
+    display: flex; flex-direction: column; min-height: 0; min-width: 0;
+    background: var(--bg-card);
+    border: var(--border-thick);
+    box-shadow: var(--shadow-hard);
+    overflow: hidden;
+}
+.matrix-title-bar {
+    flex: 0 0 auto;
+    display: flex; justify-content: space-between; align-items: center; gap: 8px;
+    padding: 10px 14px; background: var(--primary); border-bottom: var(--border-thick);
+}
+.matrix-title-bar h2 { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.matrix-hint { font-size: 11px; font-weight: 700; background: #fff; padding: 3px 7px; border: var(--border-thin); white-space: nowrap; flex: 0 0 auto; }
+.matrix-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
+.matrix-table { width: 100%; border-collapse: collapse; text-align: left; }
+.matrix-table th, .matrix-table td {
+    padding: 10px 14px; border-bottom: var(--border-thin); border-right: var(--border-thin);
+    white-space: nowrap;
+}
+.matrix-table th:last-child, .matrix-table td:last-child { border-right: none; }
+.matrix-table thead th {
+    position: sticky; top: 0; z-index: 2;
+    font-size: 12px; text-transform: uppercase; font-weight: 700; background: #fff;
+}
+.matrix-table th.col-highlight { background: var(--accent-blue) !important; color: #fff !important; }
+.matrix-cell.col-highlight, td.col-highlight { background: #ebf4f6 !important; }
+/* 显示完全: 长值(UUID/资源/向量)在列内换行, 不靠横滚 (老 Chromium sticky 不可靠) */
+.matrix-table tbody td { white-space: normal; }
+.matrix-prop { min-width: 116px; }
+.matrix-cell { word-break: break-all; }
+.matrix-cell .img-name, .matrix-cell .val-vector { white-space: normal; word-break: break-all; }
+.matrix-cell .val-image { align-items: flex-start; }
+.matrix-table tbody tr { transition: var(--transition); }
+.matrix-table tbody tr:hover { background: #f7f7f7; }
+.matrix-table tbody tr.row-changed { background: #fff9e6; }
+.matrix-table tr.row-changed .matrix-prop {
+    background: repeating-linear-gradient(-45deg,#fffbe8,#fffbe8 9px,#fff5c0 9px,#fff5c0 18px);
+}
+.matrix-prop .prop-name { font-weight: 700; font-size: 14px; }
+.matrix-prop .prop-type { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-top: 2px; }
+.matrix-empty { padding: 28px 20px; text-align: center; color: var(--text-dim); font-weight: 600; }
+
+/* 高保真值 */
+.val-vector { font-size: 13px; font-weight: 700; background: #f1f1f1; padding: 3px 7px; border: var(--border-thin); display: inline-block; }
+.val-vector.changed { background: var(--accent-blue); color: #fff; }
+.val-color { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
+.color-preview { width: 20px; height: 20px; border: var(--border-thin); box-shadow: 2px 2px 0 #000; flex: 0 0 auto; }
+.val-image { display: inline-flex; align-items: center; gap: 8px; }
+.img-thumb { width: 28px; height: 28px; border: var(--border-thin); background: var(--primary); box-shadow: 2px 2px 0 #000; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 14px; }
+.img-name { font-size: 12px; font-weight: 700; }
+.val-bool { font-weight: 700; padding: 2px 8px; border: var(--border-thin); display: inline-block; }
+.val-bool.t { background: var(--accent-green); }
+.val-bool.f { background: var(--accent-pink); }
+.ghost-val { font-style: italic; opacity: .5; font-weight: 500; }
+.ghost-val::after { content: ' 👻'; font-style: normal; }
+
+/* 问题清单 */
+.issues-panel {
+    display: flex; flex-direction: column; min-height: 0;
+    background: var(--bg-card); border: var(--border-thick); box-shadow: var(--shadow-hard);
+    padding: 14px;
+}
+.issues-header { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-thick); padding-bottom: 10px; margin-bottom: 12px; }
+.issues-header h2 { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800; }
+.issues-count { background: var(--accent-pink); border: var(--border-thin); font-size: 13px; font-weight: 700; padding: 2px 10px; box-shadow: 2px 2px 0 #000; }
+.issue-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
+.issue-item { padding: 10px; background: #fff; border: var(--border-thin); box-shadow: 3px 3px 0 #000; transition: var(--transition); }
+.issue-item:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #000; }
+.issue-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
+.issue-prop { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.issue-desc { font-size: 11px; color: #333; margin-bottom: 8px; }
+.badge-type { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border: 1.5px solid #000; flex: 0 0 auto; }
+.badge-type.loose { background: var(--primary); }
+.badge-type.excluded { background: #e5e5e5; }
+.badge-type.mixed { background: var(--accent-pink); }
+.btn-issue-jump { font-size: 11px; padding: 3px 8px; }
+.issue-empty { font-size: 12px; color: var(--text-dim); font-weight: 600; text-align: center; padding: 16px 0; }
+
+/* 空态: logic 以内联 display:flex 显隐, 这里固定竖排居中并填充容器, 否则 h3/p 会并排成一行 */
+.empty-tip { flex: 1 1 auto; min-height: 0; padding: 32px 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
+.empty-tip h3 { font-family: 'Syne', sans-serif; font-size: 18px; margin-bottom: 8px; }
+.empty-tip p { color: var(--text-dim); font-weight: 600; margin-bottom: 12px; }
+
+/* ====================================================
+   编辑视图 (保留)
+   ==================================================== */
+#view-editor { flex-direction: row; }
+.sidebar { flex: 0 0 180px; display: flex; flex-direction: column; border-right: var(--border-thick); min-height: 0; }
+.states-list { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
+.states-list.locked { opacity: .7; }
+.sidebar-footer { flex: 0 0 auto; padding: 10px; border-top: var(--border-thin); }
+.state-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: #fff; border: var(--border-thin); box-shadow: 2px 2px 0 #000; cursor: pointer; transition: var(--transition); }
+.state-item:hover { transform: translate(-1px,-1px); }
+.state-item.is-active { background: var(--primary); }
+.state-thumb { width: 26px; height: 26px; border: var(--border-thin); background: var(--accent-blue); flex: 0 0 auto; }
+.state-meta { flex: 1; min-width: 0; }
+.state-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.state-sub { font-size: 11px; color: var(--text-dim); }
+.record-dot { color: var(--accent-pink); font-size: 12px; }
+
+.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px; gap: 14px; overflow: auto; }
+.main-toolbar { display: flex; align-items: center; gap: 10px; }
+.ctrl-switch-wrap { display: flex; gap: 4px; align-items: center; }
+.ctrl-switch { min-width: 120px; }
+.state-detail { display: flex; flex-direction: column; gap: 14px; }
+.shared-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+.strip-field { display: flex; align-items: center; gap: 8px; }
+.record-actions { display: flex; gap: 8px; }
+.btn-record { background: var(--accent-pink); }
+.btn-stop { background: var(--accent-green); }
+.detail-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: var(--border-thick); padding-bottom: 10px; }
+.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-dim); }
+.state-title { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; }
+.record-badge { font-weight: 700; font-size: 12px; padding: 4px 10px; border: var(--border-thin); box-shadow: 2px 2px 0 #000; background: #fff; }
+.record-badge.is-live { background: var(--accent-pink); }
+/* 单控制器编辑: 受控属性 diff 矩阵 (复用 .matrix-table) */
+.editor-matrix-cap { display: flex; align-items: baseline; gap: 12px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
+.editor-matrix-cap .cap-hint { font-size: 11px; font-weight: 600; color: var(--text-dim); }
+.editor-matrix { display: flex; flex-direction: column; gap: 16px; }
+.em-member { background: #fff; border: var(--border-thick); box-shadow: var(--shadow-hard); overflow: hidden; }
+.em-member-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px; padding: 8px 12px; background: var(--primary); border-bottom: var(--border-thin); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.em-member-title:hover { background: var(--accent-blue); color: #fff; }
+.em-scroll { max-height: 340px; overflow: auto; }
+.em-cancel { margin-top: 4px; padding: 0 6px; line-height: 18px; font-size: 11px; }
+.editor-matrix-cap .em-showall { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
+.matrix-prop.clickable { cursor: pointer; }
+.matrix-prop.clickable:hover .prop-name { text-decoration: underline; }
+.prop-empty { padding: 16px; color: var(--text-dim); font-size: 13px; font-weight: 600; }
+
+/* 属性详情抽屉 */
+.prop-detail { position: fixed; inset: 0; z-index: 100; }
+.pd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
+.pd-panel { position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 86vw; background: var(--bg-main); border-left: var(--border-thick); box-shadow: -6px 0 0 #000; display: flex; flex-direction: column; }
+.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--primary); border-bottom: var(--border-thick); }
+.pd-name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; word-break: break-all; }
+.pd-type { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
+.pd-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
+.pd-state { border: var(--border-thin); box-shadow: 3px 3px 0 #000; background: #fff; padding: 10px 12px; }
+.pd-state.is-current { border-color: var(--accent-blue); box-shadow: 3px 3px 0 var(--accent-blue); }
+.pd-state-name { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
+.pd-state.is-current .pd-state-name::after { content: ' ◀ 当前'; color: var(--accent-blue); font-size: 11px; }
+.pd-state-val { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; word-break: break-all; }
+.pd-state-val .color-preview { width: 32px; height: 32px; }
+.pd-state-val .img-thumb { width: 40px; height: 40px; }
+.pd-ghost-tag { font-size: 11px; font-weight: 700; color: var(--text-dim); border: var(--border-thin); padding: 1px 6px; }
+.ctrl-list { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 0 auto; }
+.ctrl-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: var(--border-thin); box-shadow: 2px 2px 0 #000; }
+.ctrl-name { font-weight: 700; }
+
+/* ====================================================
+   联动关系图 (支柱 B)
+   ==================================================== */
+#view-bindings { padding: 14px; gap: 14px; overflow: auto; }
+.bindings-form {
+    flex: 0 0 auto;
+    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+    padding: 12px 14px; background: var(--bg-card);
+    border: var(--border-thick); box-shadow: var(--shadow-hard);
+}
+.bind-sep { font-weight: 700; font-size: 12px; color: var(--text-dim); }
+.bindings-graph { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.bind-group-cap {
+    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase;
+    padding: 6px 10px; background: var(--accent-blue); color: #fff; border: var(--border-thin);
+    box-shadow: 2px 2px 0 #000; align-self: flex-start;
+}
+.bind-edge {
+    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+    padding: 12px 14px; background: var(--bg-card);
+    border: var(--border-thick); box-shadow: var(--shadow-hard);
+}
+.bind-edge:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-lg); transition: var(--transition); }
+.bind-node {
+    display: inline-flex; flex-direction: column; gap: 2px;
+    padding: 6px 12px; border: var(--border-thin); box-shadow: 2px 2px 0 #000;
+}
+.bind-node.bind-src { background: var(--primary); }
+.bind-node.bind-tgt { background: var(--accent-green); }
+.bind-node .bind-ctrl { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px; }
+.bind-node .bind-state { font-size: 11px; font-weight: 700; }
+.bind-arrow { font-family: 'Space Grotesk'; font-weight: 700; font-size: 18px; }
+.bind-edge.broken .bind-tgt { background: var(--accent-pink); }
+.btn-del-binding { margin-left: auto; }
+
+/* ====================================================
+   回收站 (侧栏可折叠) + 危险按钮 + 自定义确认弹窗
+   ==================================================== */
+.btn-danger { background: var(--accent-pink); color: #000; }
+.btn-danger:hover:not(:disabled) { background: var(--accent-pink); }
+
+.recycle-bin { flex: 0 0 auto; border-top: var(--border-thin); display: flex; flex-direction: column; max-height: 45%; }
+.recycle-bin.locked { opacity: .7; pointer-events: none; }
+.bin-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; font-weight: 700; background: var(--bg-card); user-select: none; }
+.bin-header:hover { background: var(--primary); }
+.bin-caret { font-size: 11px; transition: var(--transition); }
+.recycle-bin:not(.is-collapsed) .bin-caret { transform: rotate(90deg); }
+.bin-title { flex: 1; font-size: 12px; }
+.bin-count { font-size: 11px; font-weight: 800; min-width: 18px; text-align: center; padding: 1px 5px; background: var(--accent-pink); border: var(--border-thin); box-shadow: 1px 1px 0 #000; }
+.bin-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
+.recycle-bin.is-collapsed .bin-body { display: none; }
+.bin-item { display: flex; align-items: center; gap: 6px; padding: 6px; background: #fff; border: var(--border-thin); box-shadow: 2px 2px 0 #000; }
+.bin-meta { flex: 1; min-width: 0; }
+.bin-name { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bin-sub { font-size: 10px; color: var(--text-dim); }
+.btn-bin-restore, .btn-bin-purge { flex: 0 0 auto; }
+
+/* 自定义确认弹窗 (居中模态, 不可恢复操作专用) */
+.confirm-modal { position: fixed; inset: 0; z-index: 200; }
+.cm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
+.cm-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 360px; max-width: 88vw; background: var(--bg-main); border: var(--border-thick); box-shadow: var(--shadow-hard-lg); display: flex; flex-direction: column; }
+.cm-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--accent-pink); border-bottom: var(--border-thick); }
+.cm-icon { font-size: 18px; }
+.cm-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; }
+.cm-body { padding: 16px; font-size: 13px; font-weight: 600; line-height: 1.5; }
+.cm-body b { color: var(--accent-pink); }
+.cm-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px; }
+
+/* ====================================================
+   回收态只读预览 (横幅 + 预览按钮态)
+   ==================================================== */
+.preview-banner {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px; margin-bottom: 4px;
+    background: var(--accent-blue); color: #fff;
+    border: var(--border-thick); box-shadow: var(--shadow-hard);
+    font-weight: 700;
+}
+.preview-banner .pv-icon { font-size: 18px; }
+.preview-banner .pv-text { font-size: 13px; }
+.preview-banner .pv-text b { color: var(--primary); }
+.preview-banner .pv-spacer { flex: 1; }
+.btn-primary { background: var(--accent-green); }
+.bin-item .btn-bin-preview { flex: 0 0 auto; padding: 3px 7px; }
+.bin-item .btn-bin-preview.is-active { background: var(--accent-blue); color: #fff; }