:root {
    --bg-paper: #f0e6d2;
    --ink-color: #3e2723;
    --accent-red: #a52a2a;
    --blood-red: #d32f2f;
    --accent-gold: #c5a059;
    --pencil-gray: #555;
}

body {
    margin: 0; padding: 0;
    font-family: "Songti SC", "SimSun", serif;
    background-color: var(--bg-paper);
    background-image: radial-gradient(#dccba8 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--ink-color);
    overflow: hidden; height: 100vh; display: flex; user-select: none;
}

/* 登录弹窗样式 */
#loginOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}
.login-card {
    background: var(--bg-paper); padding: 30px; border: 4px double var(--ink-color);
    width: 320px; text-align: center; border-radius: 10px;
}
#loginInput {
    width: 100%; padding: 10px; margin-bottom: 15px; box-sizing: border-box;
    border: 2px solid var(--ink-color); text-align: center; font-size: 18px;
}
.login-card button {
    width: 100%; background: var(--accent-red); color: white; padding: 12px;
    border: none; cursor: pointer; font-weight: bold;
}

/* 布局与节点样式 (复用你之前的逻辑) */
#sidebar { width: 300px; background: #efe5cf; border-right: 4px double var(--ink-color); padding: 20px; z-index: 100; overflow-y: auto; }
#viewport { flex-grow: 1; position: relative; overflow: hidden; cursor: grab; }
#canvas-world { position: absolute; transform-origin: 0 0; }
#connections { position: absolute; width: 5000px; height: 5000px; pointer-events: none; }

.node {
    position: absolute; width: 120px; background: #fff; border: 2px solid var(--ink-color);
    padding: 10px; text-align: center; border-radius: 10px; box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
}
.node.selected { border-color: var(--accent-red); box-shadow: 0 0 15px var(--accent-red); }

/* 线条样式 */
path.connection-line { fill: none; stroke: #555; stroke-width: 2; stroke-dasharray: 6,4; }
path.connection-line.murder { stroke: var(--blood-red) !important; stroke-width: 4px !important; stroke-dasharray: none !important; }

.relation-label { position: absolute; background: var(--bg-paper); border: 1px solid var(--ink-color); padding: 2px 6px; font-size: 11px; transform: translate(-50%, -50%); cursor: pointer; font-weight: bold; }
.toolbar { position: absolute; top: 15px; right: 20px; display: flex; gap: 10px; z-index: 500; }
.tool-btn { background: #fff; border: 2px solid var(--ink-color); padding: 8px 12px; cursor: pointer; }
.control-group { background: rgba(255,255,255,0.4); padding: 15px; border: 1px solid var(--ink-color); margin-bottom: 15px; }
input[type="text"] { width: 100%; padding: 8px; margin-bottom: 8px; box-sizing: border-box; }
.action-btn { width: 100%; padding: 10px; color: #fff; border: none; cursor: pointer; margin-top: 5px; }

.node-avatar { width: 60px; height: 60px; background: #eee; border-radius: 50%; margin: 0 auto 8px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; border: 1px dashed #999; }
.node-name { font-weight: bold; font-size: 14px; border-bottom: 1px solid #ccc; }
.node-tag { font-size: 10px; color: #666; }
.connect-btn { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; background: var(--accent-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; }