body { background-color: #1a0205; font-family: 'Segoe UI', sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; color: #ffd1dc; margin: 0; }
.filter-container { margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; position: sticky; top: 10px; z-index: 100; }
.filter-btn { background: #4a040d; color: #ffd1dc; border: 1px solid #ff3b3b; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 0.8em; font-weight: bold; text-transform: uppercase; }
.filter-btn.active { background: #ff3b3b; color: white; box-shadow: 0 0 15px #ff3b3b; }
.plot-card { background-color: #2d040a; border-radius: 25px; padding: 20px; width: 90%; max-width: 380px; margin-bottom: 25px; border: 1px solid #800000; text-align: center; }
.character-avatar { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ff3b3b; object-fit: cover; margin-bottom: 15px; }
.character-name { color: #ff3b3b; font-size: 1.5em; font-weight: bold; margin-bottom: 5px; }
.status { background: rgba(255, 59, 59, 0.15); color: #fff; display: inline-block; padding: 6px 15px; border-radius: 15px; font-size: 0.85em; margin-bottom: 12px; border: 1px solid #ff3b3b; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 15px; }
.tag { font-size: 0.7em; padding: 3px 8px; border-radius: 5px; font-weight: bold; }
.tag-blue { background: #004466; color: #88ccff; border: 1px solid #0088cc; }
.tag-green { background: #0b3010; color: #88ff95; border: 1px solid #1ed73e; }
.tag-purple { background: #320b3d; color: #e699ff; border: 1px solid #b300e6; }
.tag-pink { background: #4a0d21; color: #ff99cc; border: 1px solid #ff3399; }
.note-section { background: rgba(0,0,0,0.3); border-radius: 15px; padding: 12px; text-align: left; border-left: 4px solid #ff3b3b; }
.note-content { font-size: 0.9em; line-height: 1.5; color: #eee; font-style: italic; margin: 0; }