*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#1a1a2e;--bg2:#16213e;--bg3:#0f3460;--surface:#1e2a4a;--border:#2a3a5c;--text:#e0e0e0;--text-dim:#8899b0;--accent:#c9a84c;--accent2:#7b68ee;--danger:#e05030;--success:#30a050;--radius:8px;--font:system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.site-header{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 24px;position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;height:56px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;color:var(--text)}.logo span{color:var(--accent)}
.main-nav{display:flex;gap:20px}.main-nav a{color:var(--text-dim);font-size:.9rem;padding:4px 0}.main-nav a:hover{color:var(--text)}
.app-layout{display:flex;max-width:1400px;margin:0 auto;min-height:calc(100vh - 56px - 160px)}
.sidebar{width:300px;min-width:300px;background:var(--bg2);border-right:1px solid var(--border);padding:20px;overflow-y:auto;max-height:calc(100vh - 56px)}
.sidebar-section{margin-bottom:24px}.sidebar-section h2{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:12px}
.npc-form,.link-form,.edit-form{display:flex;flex-direction:column;gap:10px}
label{font-size:.8rem;color:var(--text-dim);margin-bottom:-6px}
input,select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:var(--radius);font-size:.9rem;width:100%}input:focus,select:focus{outline:none;border-color:var(--accent)}
.faction-row{display:flex;gap:8px;align-items:center}.faction-row select{flex:1}
.faction-preview{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.btn{padding:8px 16px;border-radius:var(--radius);border:none;font-size:.85rem;cursor:pointer;font-weight:600;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn-primary{background:var(--accent);color:#1a1a2e}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:4px 10px;font-size:.8rem}
.btn-row{display:flex;gap:8px}.btn-col{display:flex;flex-direction:column;gap:8px}
.legend-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text-dim)}
.legend-list li{display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.line-sample{width:24px;height:3px;border-radius:2px;flex-shrink:0}
.line-sample.ally{background:#4a9e4a}.line-sample.rival{background:#cc4444}.line-sample.family{background:#c9a84c}.line-sample.debt{background:#e0a030}.line-sample.secret{background:#9060b0}.line-sample.employer{background:#5090c0}.line-sample.enemy{background:#cc3333}.line-sample.friend{background:#44aa77}
.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}
.status{font-size:.85rem;color:var(--text-dim)}.toolbar-actions{display:flex;gap:6px}
.canvas-wrapper{flex:1;position:relative;overflow:hidden;background:var(--bg)}
#map-canvas{width:100%;height:100%;display:block;cursor:grab}#map-canvas:active{cursor:grabbing}
#map-canvas text{pointer-events:none;fill:var(--text);font-size:11px;font-family:var(--font)}
#map-canvas .node-circle{cursor:pointer;transition:r .15s}
#map-canvas .node-circle:hover{r:22}
#map-canvas .node-label{fill:var(--text);font-size:11px;text-anchor:middle;pointer-events:none}
#map-canvas .link-line{stroke-opacity:.7;transition:stroke-opacity .15s}
#map-canvas .link-line:hover{stroke-opacity:1}
#map-canvas .link-label{fill:var(--text-dim);font-size:9px;text-anchor:middle;pointer-events:none}
.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-dim)}.empty-state p{margin-top:8px;font-size:.9rem}
.content-area{background:var(--bg2);border-top:1px solid var(--border);padding:40px 24px}
.content-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.guide-section h2{font-size:1.1rem;color:var(--accent);margin-bottom:10px}
.guide-section p{color:var(--text-dim);font-size:.95rem;margin-bottom:8px}
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding:24px;text-align:center;color:var(--text-dim);font-size:.85rem}
.footer-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.footer-links{display:flex;gap:16px;justify-content:center}.footer-links a{color:var(--text-dim)}.version{margin-top:8px;font-size:.75rem;opacity:.6}
@media(max-width:900px){
.app-layout{flex-direction:column}
.sidebar{width:100%;min-width:unset;max-height:300px;border-right:none;border-bottom:1px solid var(--border)}
.canvas-area{min-height:400px}
}
@media print{
.site-header,.sidebar,.site-footer,.canvas-toolbar,.content-area{display:none!important}
.canvas-area{position:fixed;top:0;left:0;width:100vw;height:100vh}
.canvas-wrapper{background:#fff}
#map-canvas text{fill:#333}
}
[hidden]{display:none!important}


/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}