:root {
    --bg: #0f1220;
    --panel: #171a2e;
    --panel-2: #1f2340;
    --border: #2a2f52;
    --text: #e6e8f5;
    --text-dim: #9aa1c9;
    --accent: #6c8dff;
    --accent-2: #7ee0c0;
    --danger: #ff6b8b;
    --radius: 12px;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(180deg, #1a1e3a 0%, #14172b 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand .logo {
    font-size: 28px;
    color: var(--accent);
    text-shadow: 0 0 12px rgba(108, 141, 255, 0.6);
}

.brand h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.8px;
    background: linear-gradient(135deg, #7ee0c0 0%, #6c8dff 60%, #c78bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.brand h1 .brand-sub {
    -webkit-text-fill-color: var(--text-dim);
    color: var(--text-dim);
    background: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

.brand .tag {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.btn:hover { border-color: var(--accent); color: #fff; }
.btn.primary {
    background: linear-gradient(135deg, var(--accent) 0%, #8a6bff 100%);
    border-color: transparent;
    color: white;
    font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.tiny { padding: 4px 10px; font-size: 12px; }

.status {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 120px;
}
.status.loading { color: var(--accent-2); }
.status.error { color: var(--danger); }

.workspace {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px;
    height: calc(100vh - 68px);
    overflow: hidden;
    transition: grid-template-columns 0.25s ease;
}

.workspace.json-collapsed {
    grid-template-columns: 1fr 1fr 40px;
}
.workspace.json-collapsed #json-panel .panel-head,
.workspace.json-collapsed #json-panel .panel-body {
    display: none;
}
.workspace.json-collapsed #json-panel .expand-tab {
    display: flex;
}
#json-panel .expand-tab {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    width: 100%;
    background: var(--panel-2);
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 2px;
}
#json-panel .expand-tab:hover { color: var(--accent-2); }
#json-panel .expand-tab > span:first-child {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 4px;
}
#json-panel .expand-tab .chev { font-size: 18px; opacity: 0.7; }
.btn.icon-only { padding: 2px 8px; font-size: 14px; line-height: 1; }

#busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 8, 20, 0.82);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}
#busy-overlay.visible { display: flex; }
#busy-overlay .spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(126, 224, 192, 0.2);
    border-top-color: var(--accent-2);
    animation: spin 0.9s linear infinite;
}
#busy-overlay .spinner.sm {
    width: 28px;
    height: 28px;
    border-width: 3px;
}
#busy-overlay .msg {
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    line-height: 1.7;
    background: rgba(31, 35, 64, 0.85);
    padding: 16px 28px;
    border-radius: 10px;
    border: 1px solid var(--border);
    white-space: pre-wrap;
    margin: 0;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pipeline overlay — 專業術語的思維鏈進度 */
#busy-overlay.pipeline { align-items: center; }
#busy-overlay .busy-card {
    width: min(720px, 92vw);
    max-height: 82vh;
    background: linear-gradient(180deg, rgba(23,26,46,0.98) 0%, rgba(15,18,32,0.98) 100%);
    border: 1px solid rgba(126,224,192,0.35);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px rgba(0,0,0,0.7),
        0 0 80px rgba(126,224,192,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--mono);
    animation: card-in 0.3s ease-out;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#busy-overlay .busy-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(126,224,192,0.06);
    border-bottom: 1px solid rgba(126,224,192,0.22);
}
#busy-overlay .busy-titles { flex: 1; min-width: 0; }
#busy-overlay .busy-title {
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 700;
    background: linear-gradient(135deg, #7ee0c0 0%, #6c8dff 55%, #c78bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
#busy-overlay .busy-subtitle {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 3px;
    letter-spacing: 0.4px;
}
#busy-overlay .busy-elapsed {
    color: var(--accent-2);
    font-size: 11px;
    font-weight: 700;
    background: rgba(126,224,192,0.1);
    border: 1px solid rgba(126,224,192,0.3);
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 56px;
    text-align: center;
}

#busy-overlay .busy-stages {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(9,11,22,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow-x: auto;
}
#busy-overlay .busy-stage {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(31,35,64,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
#busy-overlay .busy-stage .idx {
    color: var(--text-dim);
    font-weight: 700;
    opacity: 0.6;
}
#busy-overlay .busy-stage .code {
    color: rgba(126,224,192,0.5);
    font-size: 9px;
    padding-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.08);
    margin-left: 2px;
}
#busy-overlay .busy-stage.done {
    background: rgba(126,224,192,0.08);
    border-color: rgba(126,224,192,0.25);
    color: rgba(126,224,192,0.7);
}
#busy-overlay .busy-stage.done .idx::after { content: " ✓"; color: var(--accent-2); }
#busy-overlay .busy-stage.active {
    background: linear-gradient(135deg, rgba(126,224,192,0.15) 0%, rgba(108,141,255,0.15) 100%);
    border-color: var(--accent-2);
    color: #fff;
    box-shadow: 0 0 12px rgba(126,224,192,0.35);
    animation: stage-pulse 1.4s ease-in-out infinite;
}
#busy-overlay .busy-stage.active .idx { color: var(--accent-2); opacity: 1; }
#busy-overlay .busy-stage.active .code { color: var(--accent-2); }
@keyframes stage-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(126,224,192,0.35); }
    50%      { box-shadow: 0 0 22px rgba(126,224,192,0.65); }
}

#busy-overlay .busy-log-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0a0c1a;
}
#busy-overlay .busy-log-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 10px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
#busy-overlay .busy-log-head .tag {
    background: rgba(255, 200, 120, 0.15);
    color: #ffb56b;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-size: 9px;
}
#busy-overlay .busy-log-head .dim { color: rgba(255,255,255,0.35); letter-spacing: 0.6px; }
#busy-overlay .busy-log {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(230, 232, 245, 0.85);
    height: min(320px, 40vh);
    scroll-behavior: smooth;
}
#busy-overlay .busy-log .log-line {
    display: grid;
    grid-template-columns: 62px 22px 1fr;
    align-items: baseline;
    gap: 8px;
    animation: line-in 0.24s ease-out;
}
@keyframes line-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
#busy-overlay .busy-log .ts {
    color: rgba(255,255,255,0.28);
    font-size: 10px;
    letter-spacing: 0.3px;
    text-align: right;
}
#busy-overlay .busy-log .pfx {
    color: var(--accent);
    font-weight: 700;
    text-align: center;
}
#busy-overlay .busy-log .txt { color: rgba(230, 232, 245, 0.85); }
#busy-overlay .busy-log .txt .hi {
    color: var(--accent-2);
    background: rgba(126,224,192,0.08);
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 600;
}
#busy-overlay .busy-log .log-line.ok .pfx { color: var(--accent-2); }
#busy-overlay .busy-log .log-line.ok .txt b { color: var(--accent-2); }
#busy-overlay .busy-log .log-line.dim .txt { color: rgba(255,255,255,0.42); font-style: italic; }
#busy-overlay .busy-log .log-line.dim .pfx { color: rgba(255,255,255,0.25); }

/* 最後一行加閃爍游標 */
#busy-overlay .busy-log .log-line:last-child .txt::after {
    content: " ▍";
    color: var(--accent-2);
    animation: cursor-blink 1s steps(2, start) infinite;
}
@keyframes cursor-blink { to { visibility: hidden; } }

.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(9, 11, 22, 0.9);
    display: flex;
    flex-direction: column;
}
.modal[hidden] { display: none !important; }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(180deg, #1a1e3a 0%, #14172b 100%);
    border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; }

/* 每個 modal 左上角的 Voiss AI 品牌區 */
.modal-head .modal-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
}
.modal-brand .brand-mark {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(108,141,255,0.6);
    font-size: 18px;
    line-height: 1;
}
.modal-brand .brand-name {
    background: linear-gradient(135deg, #7ee0c0 0%, #6c8dff 55%, #c78bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 1px;
}
.modal-brand .brand-sep { color: var(--text-dim); opacity: 0.5; }
.modal-brand .brand-caption {
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.modal-body {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.graph-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}
.graph-controls select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    margin-left: 6px;
    font-family: inherit;
    font-size: 12px;
}

.graph-body {
    display: grid !important;
    grid-template-columns: minmax(360px, 42%) 1fr;
    gap: 0;
    padding: 0 !important;
}
.graph-left {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border);
}
.graph-right {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #0a0c1a;
    min-width: 0;
    min-height: 0;
}
.graph-right-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.graph-right-head .gr-title { color: var(--text); font-weight: 600; }
.graph-right-head .gr-hint { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.graph-right-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}
.gr-preview-empty {
    color: var(--text-dim);
    font-size: 13px;
    padding: 40px;
    text-align: center;
    max-width: 320px;
    align-self: center;
    margin: auto;
}
.gr-canvas {
    position: relative;
    background: #ffffff;
    color: #111;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.gr-canvas .doc-canvas { box-shadow: none !important; color: #111; }
.gr-canvas .doc-canvas .node { color: #111; }
.gr-highlight {
    position: absolute;
    border: 4px solid #ff5c8a;
    border-radius: 3px;
    box-shadow:
        0 0 0 3px rgba(255, 92, 138, 0.35),
        0 0 32px rgba(255, 92, 138, 0.7);
    background: rgba(255, 92, 138, 0.08);
    pointer-events: none;
    z-index: 50;
    animation: pulse-highlight-big 1.4s ease-in-out infinite;
}
@keyframes pulse-highlight-big {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,92,138,0.35), 0 0 32px rgba(255,92,138,0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(255,92,138,0.55), 0 0 48px rgba(255,92,138,0.95); }
}

#graph-svg {
    width: 100%;
    height: 100%;
    display: block;
    background: radial-gradient(ellipse at center, #12152a 0%, #08091a 100%);
    cursor: grab;
}
#graph-svg:active { cursor: grabbing; }

#graph-svg .link {
    fill: none;
    stroke: rgba(180, 190, 240, 0.35);
    stroke-width: 1.2px;
}
#graph-svg .link.rows {
    stroke: rgba(126, 224, 192, 0.55);
    stroke-dasharray: 4 3;
}
#graph-svg .link.cells {
    stroke: rgba(255, 200, 120, 0.55);
    stroke-dasharray: 2 3;
}
#graph-svg .link.children {
    stroke: rgba(160, 170, 230, 0.5);
}
#graph-svg .link.dimmed { stroke: rgba(255,255,255,0.06); }
#graph-svg .link.highlighted { stroke: #ffffff; stroke-width: 2px; }

#graph-svg .node circle {
    stroke: #0f1220;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: stroke 0.15s;
}
#graph-svg .node.highlighted circle {
    stroke: #ffffff;
    stroke-width: 3px;
}
#graph-svg .node.dimmed { opacity: 0.12; }
#graph-svg .node.selected-primary circle {
    stroke: #ffffff;
    stroke-width: 4px;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
}
#graph-svg .node.on-path circle {
    stroke: #ffb56b;
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(255,181,107,0.7));
}
#graph-svg .node.in-subtree circle {
    stroke: #7ee0c0;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 6px rgba(126,224,192,0.5));
}
#graph-svg .link.on-path {
    stroke: #ffb56b !important;
    stroke-width: 2.5px !important;
    opacity: 1 !important;
}
#graph-svg .link.in-subtree {
    stroke: #7ee0c0 !important;
    stroke-width: 2px !important;
    opacity: 1 !important;
}
#graph-svg .node text {
    fill: #dfe4ff;
    font-size: 10px;
    font-family: var(--mono);
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(9, 11, 22, 0.85);
    stroke-width: 3px;
    text-anchor: middle;
}
#graph-svg.no-labels .node text { display: none; }

#graph-svg .link {
    stroke-width: 1.5px;
}
#graph-svg .layer-decor { pointer-events: none; }
#graph-svg .layer-decor .layer-line {
    stroke: rgba(180, 190, 240, 0.22);
    stroke-width: 1px;
    stroke-dasharray: 3 4;
}
#graph-svg .layer-decor .layer-band {
    /* fill 由 JS 決定 */
}
#graph-svg .layer-decor .layer-ring {
    stroke: rgba(180, 190, 240, 0.22);
    stroke-width: 1px;
    stroke-dasharray: 4 5;
}
#graph-svg .layer-decor .depth-label {
    fill: rgba(230, 232, 245, 0.85);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    paint-order: stroke;
    stroke: rgba(9, 11, 22, 0.85);
    stroke-width: 3px;
}

#layout-hint {
    background: rgba(108, 141, 255, 0.12);
    border: 1px solid rgba(108, 141, 255, 0.3);
    color: #cfd6ff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 10px;
}

.graph-legend {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(23, 26, 46, 0.9);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    max-width: 260px;
    max-height: calc(100% - 32px);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    transition: max-width 0.2s ease;
}
.graph-legend .legend-content {
    padding: 4px 14px 12px;
    overflow: auto;
}
.graph-legend .legend-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700;
}
.graph-legend .legend-collapse:hover { color: var(--accent-2); }
.graph-legend .legend-collapse .ch {
    font-size: 16px;
    transition: transform 0.2s ease;
}
.graph-legend.collapsed { max-width: 44px; }
.graph-legend.collapsed .legend-content { display: none; }
.graph-legend.collapsed .legend-collapse {
    border-bottom: none;
    justify-content: center;
    padding: 10px 6px;
}
.graph-legend.collapsed .legend-collapse .lbl {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 3px;
}
.graph-legend.collapsed .legend-collapse .ch { transform: rotate(180deg); }
.graph-legend .legend-title {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    margin: 8px 0 6px;
}
.graph-legend .legend-title:first-child { margin-top: 0; }
.graph-legend .legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--text);
}
.graph-legend .edge-sample {
    display: inline-block;
    width: 24px;
    height: 0;
    border-top: 2px solid;
}
.graph-legend .edge-sample.children { border-top-color: rgba(160,170,230,0.9); }
.graph-legend .edge-sample.rows { border-top-style: dashed; border-top-color: rgba(126,224,192,0.9); }
.graph-legend .edge-sample.cells { border-top-style: dashed; border-top-color: rgba(255,200,120,0.9); }
.graph-legend .legend-hint {
    background: rgba(126,224,192,0.12);
    border: 1px solid rgba(126,224,192,0.3);
    color: var(--accent-2);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    margin-bottom: 10px;
    text-align: center;
}
.graph-legend .ring-sample {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(31,35,64,0.9);
}
.graph-legend .ring-sample.primary { border: 3px solid #ffffff; }
.graph-legend .ring-sample.on-path { border: 3px solid #ffb56b; }
.graph-legend .ring-sample.in-subtree { border: 2.5px solid #7ee0c0; }
.legend-role-list { display: flex; flex-direction: column; gap: 3px; }
.legend-role-list .role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
.legend-role-list .role-item:hover { background: rgba(255,255,255,0.05); }
.legend-role-list .role-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #0f1220;
    flex-shrink: 0;
}

.graph-tooltip {
    position: absolute;
    background: rgba(23, 26, 46, 0.97);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text);
    width: 340px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    box-shadow: 0 10px 32px rgba(0,0,0,0.6);
    z-index: 5;
}
.graph-tooltip[hidden] { display: none; }

.graph-tooltip .tt-drag-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(31, 35, 64, 0.95);
    border-bottom: 1px solid var(--border);
    user-select: none;
    cursor: move;
}
.graph-tooltip .tt-drag-title {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.graph-tooltip .tt-drag-title::before {
    content: "⋮⋮  ";
    color: var(--text-dim);
    letter-spacing: 0;
    margin-right: 4px;
    opacity: 0.6;
}
.graph-tooltip .tt-close {
    background: transparent;
    color: var(--text-dim);
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}
.graph-tooltip .tt-close:hover { color: var(--text); background: rgba(255,255,255,0.08); }

.graph-tooltip .tt-body {
    padding: 12px 14px 14px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.graph-tooltip .tt-head-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.graph-tooltip .tt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.graph-tooltip .tt-dot.big { width: 10px; height: 10px; }
.graph-tooltip .tt-id { color: var(--accent-2); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.graph-tooltip .tt-tag { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.graph-tooltip .tt-tag::before { content: "<"; opacity: 0.6; }
.graph-tooltip .tt-tag::after  { content: ">"; opacity: 0.6; }
.graph-tooltip .tt-role-txt { color: var(--text); font-weight: 600; font-size: 12px; margin-left: 2px; }

.graph-tooltip .tt-section-label {
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 14px 0 6px;
}
.graph-tooltip .tt-text {
    color: var(--text);
    line-height: 1.55;
    background: rgba(9, 11, 22, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
}
.graph-tooltip .tt-text.expandable { padding: 8px 10px; }

.graph-tooltip .tt-chain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    line-height: 1.9;
}
.graph-tooltip .tt-sep {
    color: var(--text-dim);
    font-size: 12px;
    margin: 0 2px;
    opacity: 0.6;
}
.graph-tooltip .tt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(31, 35, 64, 0.7);
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 2px 9px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    font-family: var(--mono);
}
.graph-tooltip .tt-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}
.graph-tooltip .tt-chip.current {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    font-weight: 600;
}
.graph-tooltip .tt-chip-role {
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    padding-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.1);
    margin-left: 2px;
}

.graph-tooltip .tt-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 140px;
    overflow: auto;
}

.graph-tooltip .tt-bbox {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 10px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.compare-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: #0a0c1a;
}
.compare-pane {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.compare-pane .pane-label {
    padding: 8px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.compare-pane .compare-scroll {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #12152a;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}
.compare-canvas {
    position: relative;
    background: #fff;
    color: #111;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transform-origin: top left;
    flex-shrink: 0;
}
.compare-canvas .doc-canvas, .compare-canvas .doc-canvas .node { color: #111; }
.compare-canvas img { display: block; max-width: none; }

/* image side clickable bbox */
.compare-canvas .cmp-hit {
    position: absolute;
    border: 1.5px solid rgba(255, 90, 130, 0.6);
    background: rgba(255, 90, 130, 0.05);
    cursor: pointer;
    transition: all 0.12s ease;
}
.compare-canvas .cmp-hit:hover {
    background: rgba(126, 224, 192, 0.18);
    border-color: var(--accent-2);
    z-index: 5;
}
.compare-canvas .cmp-hit.selected {
    border: 3px solid var(--accent-2);
    background: rgba(126, 224, 192, 0.22);
    box-shadow: 0 0 0 3px rgba(126, 224, 192, 0.3), 0 0 20px rgba(126, 224, 192, 0.5);
    z-index: 10;
}
.compare-canvas .cmp-hit .cmp-label {
    position: absolute;
    top: -22px;
    left: -2px;
    background: var(--accent-2);
    color: #0f1220;
    font-family: var(--mono);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    display: none;
}
.compare-canvas .cmp-hit.selected .cmp-label,
.compare-canvas .cmp-hit.hovered-x .cmp-label,
.compare-canvas .cmp-hit:hover .cmp-label { display: block; }

/* html side selected */
.compare-canvas .doc-canvas .node { cursor: pointer; }
.compare-canvas .doc-canvas .node:hover {
    outline: 2px solid var(--accent-2) !important;
    outline-offset: -1px;
    z-index: 20;
}
.compare-canvas .doc-canvas .node.selected {
    outline: 3px solid var(--accent-2) !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(126, 224, 192, 0.3), 0 0 20px rgba(126, 224, 192, 0.5);
    z-index: 30;
}

.compare-info {
    grid-column: 1 / -1;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.compare-info[hidden] { display: none; }
.compare-info .info-crop {
    background: #fff;
    border-radius: 6px;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.compare-info .info-meta { flex: 1; min-width: 0; }
.compare-info .info-title {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--accent-2);
    margin-bottom: 4px;
}
.compare-info .info-tags {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
}
.compare-info .info-role-badge {
    background: rgba(126,224,192,0.15);
    color: var(--accent-2);
    padding: 2px 8px;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 600;
}
.compare-info .info-text {
    color: var(--text);
    line-height: 1.6;
    background: rgba(9,11,22,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 8px 12px;
    max-height: 100px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
}
.compare-info .info-bbox {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    margin-top: 6px;
}
.compare-info .info-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 8px 0;
}
.compare-info .info-nav-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 6px 0;
}
.compare-info .info-nav-row.scroll { max-height: 68px; overflow: auto; }
.compare-info .info-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(31,35,64,0.7);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3px 10px;
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.compare-info .info-nav:hover:not(.disabled) {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-2);
    color: var(--accent-2);
}
.compare-info .info-nav.disabled {
    color: var(--text-dim);
    cursor: default;
    opacity: 0.5;
    background: transparent;
}
.compare-info .info-nav.small { font-size: 10px; padding: 2px 8px; }

.compare-hint {
    color: var(--accent-2);
    font-size: 11px;
    background: rgba(126,224,192,0.1);
    border: 1px solid rgba(126,224,192,0.25);
    padding: 4px 10px;
    border-radius: 6px;
    margin-right: 8px;
}

/* ============================================================
 * PDF 檢視模式
 * ============================================================ */
.pdf-body {
    display: grid !important;
    grid-template-columns: 200px 1fr;
    background: #0a0c1a;
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 0;
}
.pdf-nav {
    background: var(--panel-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdf-nav .pdf-nav-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s ease;
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--mono);
}
.pdf-nav .pdf-nav-item:hover { border-color: var(--accent); color: var(--text); }
.pdf-nav .pdf-nav-item.active {
    border-color: var(--accent-2);
    background: rgba(126,224,192,0.1);
    color: var(--text);
}
.pdf-nav .pdf-nav-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: #fff;
    border-radius: 3px;
    margin-bottom: 4px;
}
.pdf-nav .pdf-nav-item.error { border-color: rgba(255,107,139,0.5); }

.pdf-pages {
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}
.pdf-page-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    scroll-margin-top: 20px;
}
.pdf-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, #1a1e3a 0%, #14172b 100%);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.pdf-page-head .voiss-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #7ee0c0 0%, #6c8dff 60%, #c78bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 14px;
}
.pdf-page-head .voiss-header::before {
    content: "◆";
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    text-shadow: 0 0 8px rgba(108,141,255,0.6);
    margin-right: 4px;
}
.pdf-page-head .page-info {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 12px;
    flex: 1;
    margin: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdf-page-head .pdf-page-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.pdf-page-head .pdf-page-actions .btn { white-space: nowrap; }
.pdf-page-head .pdf-page-actions .btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* 收合的頁卡：只顯示 head，其他隱藏 */
.pdf-page-card.collapsed .pdf-page-body,
.pdf-page-card.collapsed .pdf-units,
.pdf-page-card.collapsed .pdf-page-error {
    display: none;
}
.pdf-page-error {
    padding: 12px 16px;
    color: var(--danger);
    background: rgba(255,107,139,0.08);
    border-top: 1px solid rgba(255,107,139,0.3);
    font-size: 12px;
}
.pdf-page-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #0a0c1a;
}
.pdf-page-body.image-only { grid-template-columns: 1fr; }
.pdf-page-body.html-only { grid-template-columns: 1fr; }
.pdf-page-pane {
    padding: 16px;
    overflow: auto;
    min-width: 0;
    max-height: 78vh;
    border-right: 1px solid var(--border);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background: #12152a;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 20px 20px;
}
.pdf-page-pane:last-child { border-right: none; }
.pdf-page-pane .pane-canvas {
    background: #fff;
    color: #111;
    transform-origin: top left;
    flex-shrink: 0;
    box-shadow: 0 6px 22px rgba(0,0,0,0.4);
    position: relative;
}
.pdf-page-pane .pane-canvas img { display: block; max-width: none; }
.pdf-page-pane .pane-canvas .doc-canvas,
.pdf-page-pane .pane-canvas .doc-canvas .node { color: #111; }

.pdf-units {
    padding: 16px;
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}
.pdf-units-title {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10px;
    margin-bottom: 10px;
}
.pdf-unit {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
}
.pdf-unit-thumb {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.pdf-unit-thumb img { display: block; width: 100%; }
.pdf-unit-info {
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pdf-unit-info .name { color: var(--accent-2); font-weight: 600; }
.pdf-unit-info .nodes { color: var(--text); }
.pdf-unit-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pdf-unit-actions .btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* PDF 頁面卡片上的 Voiss AI 內嵌浮水印（覆蓋在 pane-canvas 左上角） */
.pane-canvas .voiss-stamp {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    background: rgba(15,18,32,0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    z-index: 100;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.pane-canvas .voiss-stamp::before {
    content: "◆ ";
    color: var(--accent-2);
    margin-right: 2px;
}

.hist-source-tag.pdf { background: rgba(255,143,90,0.9); color: #0f1220; }

/* ============================================================
 * 節點詳情 popover（首頁點任一節點都會顯示完整全文）
 * ============================================================ */
.node-detail {
    position: fixed;
    z-index: 200;
    width: min(460px, 90vw);
    max-height: 78vh;
    background: rgba(23, 26, 46, 0.98);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    font-family: inherit;
    animation: nd-in 0.2s ease-out;
}
@keyframes nd-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.node-detail .nd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(31,35,64,0.9);
    border-bottom: 1px solid var(--border);
    user-select: none;
    gap: 8px;
}
.node-detail .nd-head-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
.node-detail .nd-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.node-detail .nd-btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.node-detail .nd-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.node-detail .nd-close { padding: 2px 8px; font-size: 16px; line-height: 1; }
.node-detail .nd-body {
    padding: 12px 14px 14px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.node-detail .nd-empty { color: var(--text-dim); font-style: italic; }
.node-detail .nd-kids { max-height: 140px; overflow: auto; }

.compare-info .nd-btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.compare-info .nd-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* 可展開的文字區塊：預設收合顯示部分行、按鈕展開看完整 */
.expandable {
    position: relative;
    background: rgba(9, 11, 22, 0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.expandable .nd-text-inner,
.expandable .info-text-inner,
.expandable .tt-text-inner {
    overflow: hidden;
    transition: max-height 0.2s ease;
}
.expandable.collapsible[data-collapsed="1"] .nd-text-inner,
.expandable.collapsible[data-collapsed="1"] .info-text-inner,
.expandable.collapsible[data-collapsed="1"] .tt-text-inner {
    max-height: 96px;
    mask-image: linear-gradient(180deg, #000 60%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.expandable.collapsible[data-collapsed="0"] .nd-text-inner,
.expandable.collapsible[data-collapsed="0"] .info-text-inner,
.expandable.collapsible[data-collapsed="0"] .tt-text-inner {
    max-height: 60vh;
    overflow: auto;
}
.expandable .nd-expand {
    display: block;
    margin: 8px auto 0;
    background: rgba(126,224,192,0.1);
    color: var(--accent-2);
    border: 1px solid rgba(126,224,192,0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.expandable .nd-expand:hover { background: rgba(126,224,192,0.2); }

/* 對照預覽 info-text 移除舊的固定高度 */
.compare-info .info-text {
    background: rgba(9,11,22,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    max-height: none;
}
.compare-info .info-text.expandable { padding: 10px 12px; }


.badge {
    display: inline-block;
    background: var(--accent-2);
    color: #0f1220;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1.3;
    vertical-align: middle;
}
.badge[hidden] { display: none; }

.history-body {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    overflow: auto;
    background: #0a0c1a;
    align-content: flex-start;
}
.history-empty {
    grid-column: 1 / -1;
    color: var(--text-dim);
    text-align: center;
    padding: 60px 20px;
    font-size: 14px;
}

.hist-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.hist-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hist-thumb {
    position: relative;
    background: #ffffff;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hist-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.hist-source-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(15,18,32,0.85);
    color: var(--text);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: var(--mono);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.hist-source-tag.upload { background: rgba(108,141,255,0.9); color: #fff; }
.hist-source-tag.manual { background: rgba(255,181,107,0.9); color: #0f1220; }
.hist-source-tag.demo { background: rgba(126,224,192,0.9); color: #0f1220; }

.hist-meta {
    padding: 10px 12px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hist-filename {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hist-line {
    display: flex;
    gap: 10px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
}
.hist-line .sep { opacity: 0.4; }
.hist-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.12s;
}
.hist-card:hover .hist-actions { opacity: 1; }
.hist-action-btn {
    background: rgba(15,18,32,0.9);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.hist-action-btn:hover { background: rgba(255,255,255,0.1); }
.hist-action-btn.danger:hover { background: rgba(255,107,139,0.8); color: white; border-color: transparent; }


.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
}

.panel-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
}
.toggle select {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 12px;
}

.panel-actions {
    display: flex;
    gap: 6px;
}

.panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.scrollable {
    overflow: auto;
    padding: 12px;
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-dim);
    font-size: 13px;
}

.image-wrap {
    position: relative;
    display: inline-block;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.image-wrap img { display: block; max-width: none; }
.image-wrap .bbox-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.image-wrap .bbox-layer.hidden { display: none; }
.image-wrap .bbox-layer .bbox {
    position: absolute;
    border: 1px solid rgba(255, 80, 120, 0.7);
    background: rgba(255, 80, 120, 0.06);
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.image-wrap .bbox-layer .bbox:hover,
.image-wrap .bbox-layer .bbox.hovered {
    background: rgba(126, 224, 192, 0.18);
    border-color: var(--accent-2);
    z-index: 5;
}
.image-wrap .bbox-layer .bbox .label {
    position: absolute;
    top: -18px;
    left: -1px;
    background: var(--accent-2);
    color: #0f1220;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    display: none;
    font-family: var(--mono);
}
.image-wrap .bbox-layer .bbox:hover .label,
.image-wrap .bbox-layer .bbox.hovered .label { display: block; }

.preview-wrap {
    display: inline-block;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #111;
}
.preview-wrap .doc-canvas.debug .node {
    outline: 1px dashed rgba(108, 141, 255, 0.5);
}
.preview-wrap .doc-canvas .node[data-tag="td"],
.preview-wrap .doc-canvas .node[data-tag="th"] {
    outline: none;
}

/* 交叉高亮：首頁 HTML 預覽 hover 對應圖片區塊 */
#preview-wrap .doc-canvas .node.hovered-x {
    outline: 2px solid #7ee0c0 !important;
    outline-offset: -1px;
    background: rgba(126, 224, 192, 0.14) !important;
    z-index: 60 !important;
}

/* 對照預覽兩側 hover 交叉高亮 */
.compare-canvas .cmp-hit.hovered-x:not(.selected) {
    background: rgba(126, 224, 192, 0.18);
    border-color: var(--accent-2);
    z-index: 5;
}
.compare-canvas .doc-canvas .node.hovered-x:not(.selected) {
    outline: 2px solid var(--accent-2) !important;
    outline-offset: -1px;
    background: rgba(126, 224, 192, 0.10) !important;
    z-index: 20 !important;
}

/* 面板寬度自動縮放時，容器要能容納放大後的高度 */
.panel-body.scrollable {
    align-items: flex-start;
    justify-content: flex-start;
}

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    padding: 0 8px;
}
.tab {
    padding: 8px 14px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.tab-content { display: none; flex: 1; overflow: auto; min-height: 0; }
.tab-content.active { display: flex; flex-direction: column; }

.code {
    margin: 0;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
    color: #dfe4ff;
    white-space: pre;
    overflow: auto;
    flex: 1;
}

.code .k { color: #a5b4ff; }
.code .s { color: #7ee0c0; }
.code .n { color: #ffb56b; }
.code .b { color: #ff6b8b; }
.code .p { color: var(--text-dim); }

@media (max-width: 1200px) {
    .workspace { grid-template-columns: 1fr; height: auto; overflow: visible; }
    .panel { height: 500px; }
}