frontend/src/styles/global.css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0f; color: #e0e0e0; min-height: 100vh; }
.app { max-width: 950px; margin: 0 auto; padding: 2rem 1rem; }
h1 { text-align: center; font-size: 2.5rem; margin-bottom: 0.5rem; }
h1 span { background: linear-gradient(135deg, #ff6b6b, #ffd93d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { text-align: center; color: #888; margin-bottom: 2rem; }
.form-section { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; margin-bottom: 0.3rem; color: #aaa; font-size: 0.9rem; }
.input-group input, .input-group textarea { width: 100%; padding: 0.8rem; border: 1px solid #333; border-radius: 8px; background: #12121a; color: #e0e0e0; font-size: 1rem; }
.input-group textarea { min-height: 100px; resize: vertical; }
.sides-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.side { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; }
.side.left { border-top: 3px solid #ff6b6b; }
.side.right { border-top: 3px solid #4ecdc4; }
.btn { width: 100%; padding: 1rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #ff6b6b, #ffd93d); color: #000; transition: transform 0.2s; }
.btn:hover { transform: scale(1.02); }
.loading { text-align: center; padding: 3rem; }
.loading .spinner { width: 50px; height: 50px; border: 4px solid #333; border-top-color: #ffd93d; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.results { margin-top: 1rem; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.verdict-card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 2rem; border: 1px solid #333; }
.winner-name { font-size: 2rem; font-weight: 700; color: #ffd93d; margin-bottom: 0.5rem; }
.verdict-text { color: #ccc; font-size: 1.05rem; line-height: 1.6; }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ffd93d; color: #000; font-weight: 800; font-size: 0.8rem; padding: 0.4rem 0.7rem; border-radius: 20px; z-index: 1; }
.score-card { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; text-align: center; }
.score-card h3 { margin-bottom: 0.5rem; }
.score-number { font-size: 2.5rem; font-weight: 700; }
.score-number span { font-size: 1rem; color: #888; }
.score-card.left .score-number { color: #ff6b6b; }
.score-card.right .score-number { color: #4ecdc4; }

/* Detail panels */
.detail-section { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; }
.detail-section h3 { margin-bottom: 1rem; font-size: 1.2rem; }
.detail-section h4 { color: #ffd93d; margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.detail-section ul { padding-left: 1.2rem; }
.detail-section li { margin-bottom: 0.4rem; color: #bbb; line-height: 1.4; }
.accent-left { border-left: 3px solid #ff6b6b; }
.accent-right { border-left: 3px solid #4ecdc4; }

/* Score bars */
.mini-scores { margin-bottom: 0.5rem; }
.score-bar-wrap { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.score-bar-label { width: 110px; font-size: 0.8rem; color: #aaa; }
.score-bar-track { flex: 1; height: 8px; background: #12121a; border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.score-bar-val { width: 30px; text-align: right; font-size: 0.85rem; font-weight: 600; }

/* Emotional vs Rational bar */
.emo-rational { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0; font-size: 0.8rem; color: #aaa; }
.emo-bar { flex: 1; height: 8px; background: #4ecdc4; border-radius: 4px; overflow: hidden; }
.emo-fill { height: 100%; background: #ff6b6b; border-radius: 4px; }

/* Lists */
.list-good li::marker { color: #4ade80; }
.list-bad li::marker { color: #ef4444; }

/* Fallacy cards */
.fallacy-card { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; padding: 0.8rem; margin-bottom: 0.5rem; }
.fallacy-name { display: inline-block; background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3px; }
.fallacy-quote { color: #ff9999; font-style: italic; margin: 0.4rem 0; font-size: 0.85rem; }
.fallacy-explain { color: #aaa; font-size: 0.85rem; line-height: 1.4; }

.info-text { color: #bbb; line-height: 1.5; font-size: 0.95rem; }

/* Insight cards */
.insight-card { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
.insight-card h4 { margin-bottom: 0.5rem; }
.insight-card p { color: #bbb; line-height: 1.5; }
.insight-card.bias { border-left: 3px solid #fbbf24; }
.insight-card.bias h4 { color: #fbbf24; }
.insight-card.common { border-left: 3px solid #4ade80; }
.insight-card.common h4 { color: #4ade80; }
.insight-card.compromise { border-left: 3px solid #60a5fa; }
.insight-card.compromise h4 { color: #60a5fa; }
.insight-card.tip-left { border-left: 3px solid #ff6b6b; }
.insight-card.tip-left h4 { color: #ff6b6b; }
.insight-card.tip-right { border-left: 3px solid #4ecdc4; }
.insight-card.tip-right h4 { color: #4ecdc4; }

/* Plot twist */
.plot-twist { background: linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #6c5ce7; }
.plot-twist h4 { color: #a29bfe; margin-bottom: 0.5rem; }
.plot-twist p { color: #bbb; line-height: 1.5; }

.back-btn { background: #333; color: #fff; margin-top: 1.5rem; }
@media (max-width: 768px) { .sides-container, .scores { grid-template-columns: 1fr; } h1 { font-size: 1.8rem; } .vs-badge { display: none; } }