body { font-family: system-ui, sans-serif; margin: 0; background: #f4f5f7; color: #222; }
header { background: #1f2d3d; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
header a { color: #aac8ff; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.login-box { max-width: 360px; margin: 8rem auto; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); text-align: center; }
.login-box input { display: block; width: 100%; box-sizing: border-box; margin: .5rem 0; padding: .5rem; }
.login-box button { width: 100%; padding: .5rem; margin-top: .5rem; }
.error { color: #b00020; }
.docs, .chat { background: white; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.docs li { margin-bottom: .3rem; }
.dl-link { font-size: .85rem; color: #777; margin-left: .5rem; }
.hint { color: #555; font-size: .9rem; }
.mode-toggle { margin-bottom: .75rem; display: flex; gap: 1.5rem; font-size: .95rem; }
.mode-toggle label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
textarea { width: 100%; box-sizing: border-box; padding: .5rem; font-size: 1rem; }
#info-text.argument { background: #f8f9fb; border: 1px solid #e0e3e8; padding: 1rem; border-radius: 6px; white-space: pre-wrap; font-size: .95rem; }
button#ask-btn { margin-top: .5rem; padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; }
.columns { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
.column { flex: 1; padding: 1rem; border-radius: 6px; white-space: pre-wrap; font-size: .95rem; }
.column.david { background: #eef4ff; border: 1px solid #c8dcff; }
.column.lucie { background: #fff0f0; border: 1px solid #ffd0d0; }
.score { font-weight: bold; }
.winner { margin-top: 1rem; font-weight: bold; font-size: 1.1rem; text-align: center; }
.sources { margin-top: 1rem; font-size: .8rem; color: #777; word-break: break-all; }