font-style: italic; font-size: 0.9rem;} .no-players a{ color: var(--neon-blue);} .content-view{ margin-bottom: 1rem;} .content-edit{ display: none; margin-bottom: 1rem;} .content-edit.visible{ display: block;} .form-inline{ display: inline;} .content-actions{ display: flex; gap: 0.75rem; justify-content: space-between; flex-wrap: wrap;} .actions-left, .actions-right{ display: flex; gap: 0.5rem; flex-wrap: wrap;} .content-header-nobottom{ margin-bottom: 0;} .h3-nomargin{ margin: 0;} .campaign-split{ display: flex; gap: 2rem; margin-top: 0.75rem;} .campaign-split-col{ flex: 1; min-width: 0;} .campaign-list-nomargin{ margin-top: 0.25rem;} .session-item-flex{ display: flex; justify-content: space-between; padding: 0.25rem 0.5rem;} .player-tags-flex{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem;} .campaign-detail-spaced{ margin-top: 0.5rem;} .field-label-spaced{ margin-left: 1rem;} .no-campaigns-spaced{ margin-top: 0.25rem;} .session-actions-bottom{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border);} .campaign-sections{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem;} @media (max-width: 768px){ .campaign-sections{ grid-template-columns: 1fr;}} .campaign-actions-bottom{ display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border);} .section{ margin-bottom: 1.5rem;} .section h2{ font-size: 1.25rem; color: var(--neon-blue); margin: 0;} .character-card, .session-card{ display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; margin-bottom: 0.4rem;} .character-actions{ display: flex; gap: 0.5rem;} .toggle-form{ display: inline;} .campaigns-list{ display: grid; gap: 1rem;} .campaign-card{ padding: 0.6rem 0.85rem; margin-bottom: 0.4rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 2px solid var(--neon-green);} .campaign-card h3{ font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.15rem; color: var(--neon-green); margin-bottom: 0;} .game-system{ color: var(--text-secondary); font-size: 0.85rem;} .tree-campaign .campaign-header{ margin-bottom: 0.25rem;} .tree-campaign{ padding: 0.5rem 0.75rem; margin-bottom: 0.4rem;} .campaign-detail{ font-size: 0.85rem; line-height: 1.5;} .campaign-detail + .campaign-detail{ margin-top: 0.15rem;} .campaign-detail .field-label{ margin-right: 0.25rem;} .gm-card{ padding: 1.25rem; margin-bottom: 1rem;} .gm-card h3{ color: var(--neon-gold); font-family: 'Space Grotesk', system-ui, sans-serif; margin-bottom: 0.5rem;} .gm-stats{ display: flex; gap: 1.5rem; margin: 0.75rem 0; flex-wrap: wrap;} .gm-stats .stat{ color: var(--text-secondary); font-size: 0.85rem;} .gm-actions{ display: flex; gap: 0.5rem;} .player-characters-list{ margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06);} .player-character-row{ padding: 0.3rem 0; font-size: 0.88rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;} .player-character-row .text-secondary{ color: var(--text-secondary); font-size: 0.82rem;} .users-compact{ margin-top: 0.75rem; max-height: 300px; overflow-y: auto;} .user-row{ display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04);} .user-row:last-child{ border-bottom: none;} .user-row .user-role-badge{ font-size: 0.73rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); font-weight: 500; letter-spacing: 0.03em;} .user-row .user-role-badge.role-admin{ background: rgba(255, 0, 68, 0.15); color: var(--neon-red); border: 1px solid rgba(255, 0, 68, 0.25);} .user-row .user-role-badge.role-gamemaster{ background: rgba(255, 204, 0, 0.15); color: var(--neon-gold); border: 1px solid rgba(255, 204, 0, 0.25);} .user-row .user-role-badge.role-player{ background: rgba(255, 0, 255, 0.15); color: var(--neon-pink); border: 1px solid rgba(255, 0, 255, 0.25);} .user-row .user-date{ margin-left: auto; color: var(--text-secondary); font-size: 0.8rem;} .prompt-box{ padding: 1rem; margin-bottom: 0.75rem;} .prompt-box h3{ font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1rem; margin-bottom: 0.5rem;} .prompt-type{ font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;} .prompt-source{ font-size: 0.8rem; color: var(--text-secondary);} .prompt-content{ margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-primary); line-height: 1.5;} .prompt-content p{ margin-bottom: 0.5rem;} .empty-prompt{ color: var(--text-secondary); font-style: italic; font-size: 0.9rem;} .prompt-box.dimmed{ opacity: 0.45;} .prompt-section{ margin-bottom: 1.5rem;} .section-title{ font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.1rem; color: var(--neon-pink); margin-bottom: 0.75rem;} .prompts-list{ display: grid; gap: 0.75rem;} .label-admin .prompt-type, .label-admin .prompt-source{ color: var(--neon-red);} .label-gamemaster .prompt-type, .label-gamemaster .prompt-source{ color: var(--neon-gold);} .label-system .prompt-type, .label-system .prompt-source{ color: var(--neon-blue);} .label-campaign .prompt-type, .label-campaign .prompt-source{ color: var(--neon-green);} .label-session .prompt-type, .label-session .prompt-source{ color: var(--neon-pink);} .label-players .prompt-type, .label-players .prompt-source{ color: var(--neon-orange);} .label-notes .prompt-type, .label-notes .prompt-source{ color: var(--text-secondary);} .label-transcripts .prompt-type, .label-transcripts .prompt-source{ color: var(--neon-blue);} .transcript-text{ white-space: pre-wrap; word-wrap: break-word;} .scrollable-text{ max-height: 40vh; overflow-y: auto;} .json-content{ font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; white-space: pre-wrap; word-wrap: break-word; background: rgba(0, 0, 0, 0.4); padding: 0.75rem; border-radius: var(--radius-sm); color: var(--neon-green); max-height: 50vh; overflow-y: auto;} .transcript-files{ margin-top: 0.5rem; font-size: 0.85rem;} .transcript-files li{ color: var(--neon-green); margin-bottom: 0.25rem;} .markdown-content{ background: rgba(0, 0, 0, 0.25); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); min-height: 80px; font-size: 0.9rem; line-height: 1.65;} .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6{ font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--neon-pink); margin-top: 1.25rem; margin-bottom: 0.5rem;} .markdown-content h1{ font-size: 1.4rem;} .markdown-content h2{ font-size: 1.2rem;} .markdown-content h3{ font-size: 1.05rem;} .markdown-content p{ margin-bottom: 0.75rem;} .markdown-content ul, .markdown-content ol{ margin-left: 1.5rem; margin-bottom: 0.75rem; list-style: none; padding-left: 0;} .markdown-content li{ margin-bottom: 0.25rem;} .markdown-content li::before{ content: "- "; color: var(--text-muted, #888);} .markdown-content code{ background: rgba(0, 0, 0, 0.4); padding: 0.125rem 0.375rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; color: var(--neon-orange);} .markdown-content pre{ background: rgba(0, 0, 0, 0.4); padding: 1rem; border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: 0.75rem; border: 1px solid var(--glass-border);} .markdown-content pre code{ background: none; padding: 0; color: var(--text-primary);} .markdown-content blockquote{ border-left: 3px solid var(--neon-blue); padding-left: 1rem; margin-left: 0; color: var(--text-secondary); font-style: italic;} .markdown-content table{ width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; font-size: 0.85rem;} .markdown-content th, .markdown-content td{ border: 1px solid var(--glass-border); padding: 0.5rem 0.75rem; text-align: left;} .markdown-content th{ background: rgba(0, 0, 0, 0.3); color: var(--neon-blue); font-weight: 600;} .markdown-content a{ color: var(--neon-blue); text-decoration: none;} .markdown-content a:hover{ color: var(--neon-pink);} .markdown-content strong{ color: var(--neon-gold);} .markdown-content em{ color: var(--text-secondary);} .markdown-content img{ max-width: 100%; border-radius: var(--radius-sm);} .empty-state, .empty-text, .empty-content, .no-players{ color: var(--text-secondary); font-style: italic; padding: 1.25rem; text-align: center; background: rgba(0, 0, 0, 0.15); border-radius: var(--radius-sm); border: 1px dashed rgba(255, 255, 255, 0.06); font-size: 0.9rem;} .files-list{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-border);} .files-list h4{ color: var(--neon-blue); font-family: 'Space Grotesk', system-ui, sans-serif; margin-bottom: 0.5rem;} @keyframes fadeIn{ from{ opacity: 0;} to{ opacity: 1;}} @keyframes fadeInUp{ from{ opacity: 0; transform: translateY(12px);} to{ opacity: 1; transform: translateY(0);}} @keyframes neonGlow{ 0%, 100%{ box-shadow: var(--shadow-glow-blue);} 50%{ box-shadow: 0 0 20px rgba(0, 243, 255, 0.6), 0 0 40px rgba(0, 243, 255, 0.2);}} @keyframes modalSlideIn{ from{ opacity: 0; transform: translateY(-20px) scale(0.97);} to{ opacity: 1; transform: translateY(0) scale(1);}} @keyframes modalBackdropIn{ from{ opacity: 0;} to{ opacity: 1;}} @keyframes badgePulse{ 0%, 100%{ opacity: 1;} 50%{ opacity: 0.5;}} @keyframes badgeColorShift{ 0%{ border-color: var(--neon-blue); color: var(--neon-blue);} 33%{ border-color: var(--neon-green); color: var(--neon-green);} 66%{ border-color: var(--neon-gold); color: var(--neon-gold);} 100%{ border-color: var(--neon-blue); color: var(--neon-blue);}} @keyframes shimmer{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;}} @keyframes borderGradient{ 0%{ background: linear-gradient(0deg, rgba(0, 243, 255, 0.15) 0%, transparent 50%, rgba(255, 0, 255, 0.1) 100%);} 25%{ background: linear-gradient(90deg, rgba(0, 204, 102, 0.15) 0%, transparent 50%, rgba(0, 243, 255, 0.1) 100%);} 50%{ background: linear-gradient(180deg, rgba(255, 0, 255, 0.15) 0%, transparent 50%, rgba(0, 204, 102, 0.1) 100%);} 75%{ background: linear-gradient(270deg, rgba(0, 243, 255, 0.15) 0%, transparent 50%, rgba(255, 0, 255, 0.1) 100%);} 100%{ background: linear-gradient(360deg, rgba(0, 243, 255, 0.15) 0%, transparent 50%, rgba(255, 0, 255, 0.1) 100%);}} @keyframes indicatorSlideIn{ from{ width: 0; opacity: 0;} to{ width: 60%; opacity: 1;}} @keyframes tableWave{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;}} @keyframes sortBounceUp{ 0%{ transform: translateY(-50%) rotate(315deg) scale(0.8); opacity: 0.3;} 50%{ transform: translateY(-40%) rotate(315deg) scale(1.2); opacity: 0.9;} 100%{ transform: translateY(-40%) rotate(315deg) scale(1.1); opacity: 0.8;}} @keyframes sortBounceDown{ 0%{ transform: translateY(-70%) rotate(135deg) scale(0.8); opacity: 0.3;} 50%{ transform: translateY(-60%) rotate(135deg) scale(1.2); opacity: 0.9;} 100%{ transform: translateY(-60%) rotate(135deg) scale(1.1); opacity: 0.8;}} .animate-fade-in{ animation: fadeIn var(--animation-duration-base) var(--animation-ease-out) both;} .animate-fade-in-up{ animation: fadeInUp var(--animation-duration-slow) var(--animation-ease-out) both;} .animate-neon-glow{ animation: neonGlow var(--animation-pulse-duration) ease-in-out infinite;} .animate-modal-enter{ animation: modalSlideIn var(--animation-duration-base) var(--animation-ease-out) both;} .animate-modal-backdrop{ animation: modalBackdropIn var(--animation-duration-fast) var(--animation-ease-out) both;} .animate-badge-pulse{ animation: badgePulse var(--animation-pulse-duration) ease-in-out infinite;} .animate-shimmer{ background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 2s infinite;} [data-animate]{ opacity: 0;} [data-animate].animate-visible{ opacity: 1;}