/* 精灵引擎 · 问事儿沙盘（第四模式）盘面样式
   2026-09-17 | 来源：_design/sandbox_samples/沙盘样板_网页端.html（信息架构照搬，样式按品牌色落地）
   仅作用于 .sbx-* 命名空间，不污染 style.css 既有类名。
   四态配色与全局色板见《开发指导手册 v1.0》§W2。 */

.sbx-pan {
    --sbx-bg: #FFF9F2;
    --sbx-card: #FFFFFF;
    --sbx-line: #F0E4D6;
    --sbx-line2: #E7D7C4;
    --sbx-txt: #3A2E23;
    --sbx-txt2: #8B7D6E;
    --sbx-txt3: #B3A79A;
    --sbx-orange: #FF8B27;
    --sbx-orange-d: #E5761A;
    --sbx-orange-l: #FFF1E0;
    --sbx-orange-b: #FFE0BE;
    --sbx-sage: #00b96b;
    --sbx-sage-l: #E8F8F0;
    --sbx-sage-b: #BCEBD5;
    --sbx-clay: #D9534F;
    --sbx-clay-l: #FDECEA;
    --sbx-clay-b: #F6CFCC;
    --sbx-gray-l: #F4F0EA;
    --sbx-gray-b: #DED6CB;
    --sbx-r: 14px;
    --sbx-r-sm: 9px;

    background: var(--sbx-card);
    border: 1px solid var(--sbx-line2);
    border-radius: var(--sbx-r);
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(58, 46, 35, .07);
    margin: 4px 0 12px;
    max-width: 820px;
    color: var(--sbx-txt);
    font-size: 14px;
    line-height: 1.72;
    text-align: left;
}

.sbx-pan * { box-sizing: border-box; }

/* ── 盘头 ── */
.sbx-hd {
    background: linear-gradient(135deg, #FFF6EA, #FFF1E0);
    border-bottom: 1px solid var(--sbx-orange-b);
    padding: 13px 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sbx-hd .sbx-ttl { font-weight: 700; font-size: 15px; }
.sbx-badge {
    background: #fff;
    border: 1px solid var(--sbx-orange-b);
    color: var(--sbx-orange-d);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.sbx-badge.sbx-lock { border-color: var(--sbx-line2); color: var(--sbx-txt2); }
.sbx-hd .sbx-meta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--sbx-txt3);
    text-align: right;
    line-height: 1.5;
}

/* ── 主导动机 ── */
.sbx-captain {
    margin: 15px 17px 0;
    padding: 12px 14px;
    background: var(--sbx-orange-l);
    border: 1px solid var(--sbx-orange-b);
    border-radius: var(--sbx-r-sm);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.sbx-captain .sbx-k {
    font-size: 11.5px;
    color: var(--sbx-orange-d);
    font-weight: 700;
    letter-spacing: .5px;
    flex: 0 0 60px;
    padding-top: 2px;
}
.sbx-captain .sbx-v { font-size: 13.5px; color: var(--sbx-txt); }

/* ── 分节标题 ── */
.sbx-sect {
    margin: 18px 17px 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sbx-txt2);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sbx-sect::after { content: ""; flex: 1; height: 1px; background: var(--sbx-line); }

/* ── 六域域卡 ── */
.sbx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding: 0 17px;
}
.sbx-dom {
    border: 1px solid var(--sbx-line);
    border-radius: var(--sbx-r-sm);
    padding: 12px 13px;
    background: #fff;
    position: relative;
}
.sbx-dom.sbx-clickable { cursor: pointer; transition: .18s; }
.sbx-dom.sbx-clickable:hover {
    border-color: var(--sbx-orange-b);
    box-shadow: 0 3px 12px rgba(255, 139, 39, .09);
}
.sbx-dom-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    padding-right: 16px;
}
.sbx-dom-h .sbx-nm { font-weight: 700; font-size: 13.5px; }
.sbx-state {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sbx-st-flow    { background: var(--sbx-sage-l);  color: #00875A; border-color: var(--sbx-sage-b); }
.sbx-st-rapid   { background: var(--sbx-orange-l); color: var(--sbx-orange-d); border-color: var(--sbx-orange-b); }
.sbx-st-stall   { background: var(--sbx-gray-l);  color: #7A6E60; border-color: var(--sbx-gray-b); }
.sbx-st-against { background: var(--sbx-clay-l);  color: #B03B37; border-color: var(--sbx-clay-b); }

.sbx-line { font-size: 12.8px; color: var(--sbx-txt); margin-bottom: 8px; }
.sbx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sbx-chip {
    background: var(--sbx-gray-l);
    border: 1px solid var(--sbx-line2);
    color: var(--sbx-txt2);
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
}
.sbx-carrier {
    background: var(--sbx-sage-l);
    border-left: 3px solid var(--sbx-sage);
    border-radius: 0 6px 6px 0;
    padding: 7px 10px;
    font-size: 12.3px;
    color: #0B6B45;
}
.sbx-carrier b { font-weight: 700; color: #00875A; }

.sbx-adv { display: none; margin-top: 10px; border-top: 1px dashed var(--sbx-line2); padding-top: 9px; }
.sbx-dom.sbx-open .sbx-adv { display: block; }
.sbx-adv .sbx-q { font-size: 11.5px; color: var(--sbx-orange-d); font-weight: 700; margin-bottom: 2px; }
.sbx-adv .sbx-a { font-size: 12.5px; color: var(--sbx-txt); margin-bottom: 9px; }
.sbx-adv .sbx-a:last-child { margin-bottom: 0; }
.sbx-turn {
    position: absolute;
    right: 10px;
    top: 11px;
    font-size: 11px;
    color: var(--sbx-txt3);
    transition: transform .18s;
}
.sbx-dom.sbx-open .sbx-turn { color: var(--sbx-orange); transform: rotate(90deg); }

/* ── 元亨利贞 / 势位 样式已移除（2026-09-18）
   对应渲染函数 planSection / potSection 已从 sandbox.js 摘除 ——
   两者属易学框架，非动机心理学内容，不呈现在用户可见文字里。 */

/* ── 盘尾 ── */
.sbx-ft {
    border-top: 1px solid var(--sbx-line);
    margin-top: 17px;
    padding: 11px 17px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    background: #FFFCF8;
}
.sbx-ft .sbx-nt { font-size: 11.5px; color: var(--sbx-txt3); flex: 1; min-width: 140px; }
.sbx-btn {
    border: 1px solid var(--sbx-orange);
    background: #fff;
    color: var(--sbx-orange-d);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: .18s;
}
.sbx-btn:hover { background: var(--sbx-orange-l); }
.sbx-btn.sbx-solid { background: var(--sbx-orange); color: #fff; border-color: var(--sbx-orange); }
.sbx-btn.sbx-solid:hover { background: var(--sbx-orange-d); }
.sbx-btn.sbx-done { border-color: var(--sbx-sage); color: #00875A; background: var(--sbx-sage-l); cursor: default; }

/* ── 未测评引导卡 ── */
.sbx-guide {
    max-width: 520px;
    background: var(--sbx-orange-l, #FFF1E0);
    border: 1px solid #FFE0BE;
    border-radius: 12px;
    padding: 14px 16px;
    color: #3A2E23;
    font-size: 13.5px;
    line-height: 1.75;
}
.sbx-guide .sbx-guide-t { font-weight: 700; margin-bottom: 5px; }
.sbx-guide .sbx-btn { margin-top: 11px; }

/* ── 我的沙盘（独立页） ── */
.sbx-page { max-width: 860px; margin: 0 auto; padding: 22px 18px 80px; }
.sbx-page h1 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.sbx-page .sbx-sub { font-size: 12.5px; color: #8B7D6E; margin-bottom: 20px; }
.sbx-list { display: flex; flex-direction: column; gap: 10px; }
.sbx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #F0E4D6;
    border-radius: 11px;
    padding: 12px 14px;
    cursor: pointer;
    transition: .16s;
}
.sbx-item:hover { border-color: #FFE0BE; box-shadow: 0 3px 12px rgba(255, 139, 39, .09); }
.sbx-item .sbx-it-id { font-size: 12px; color: #B3A79A; font-variant-numeric: tabular-nums; }
.sbx-item .sbx-it-main { flex: 1; min-width: 0; }
.sbx-item .sbx-it-t { font-size: 13.5px; font-weight: 600; }
.sbx-item .sbx-it-d { font-size: 11.5px; color: #8B7D6E; }
.sbx-empty {
    text-align: center;
    color: #B3A79A;
    font-size: 13px;
    padding: 40px 12px;
}
.sbx-detail { margin-top: 18px; }

/* ── 挂在聊天流里的盘面行：去掉气泡背景/边框，让盘面卡自己撑满 ── */
.sbx-msg .message-content {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
}
.sbx-msg .message-avatar { align-self: flex-start; }

/* ── 小程序/窄屏 ── */
@media (max-width: 640px) {
    .sbx-grid { grid-template-columns: 1fr; }
    .sbx-plan { grid-template-columns: repeat(2, 1fr); }
    .sbx-pan { margin-left: -6px; margin-right: -6px; }
    .sbx-hd .sbx-meta { width: 100%; text-align: left; margin-left: 0; }
}
.sbx-bind-note{margin:16px 0;padding:16px;border:1px solid #d8b98a;border-radius:14px;background:#fff8ed;color:#5b4630}
.sbx-bind-note p{margin:0 0 12px;line-height:1.55}
.sbx-bind-error{color:#9b2c2c}