* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1220;
  color: #e8ebf5;
  min-height: 100vh;
}
main { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }
header h1 { margin: 0 0 4px; font-size: 32px; background: linear-gradient(90deg, #5865f2, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sub { color: #9aa0bf; margin-top: 0; }
form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #9aa0bf; }
textarea, input[type=text], input[type=number], input[type=date], select {
  background: #1a1e36;
  border: 1px solid #2a2f50;
  color: #e8ebf5;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
}
.drop {
  border: 2px dashed #2a2f50;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  color: #9aa0bf;
  transition: border-color .2s;
}
.drop:hover { border-color: #5865f2; }
.drop input { display: none; }
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .uploads { grid-template-columns: 1fr; } }
details { background: #1a1e36; border: 1px solid #2a2f50; border-radius: 10px; padding: 12px 16px; }
details summary { cursor: pointer; color: #9aa0bf; font-size: 13px; }
details[open] summary { margin-bottom: 12px; }
details .grid { margin-top: 0; }
button {
  background: #5865f2;
  color: white;
  border: 0;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
#result { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.box { background: #1a1e36; padding: 20px; border-radius: 12px; }
.box h3 { margin: 0 0 12px; color: #c8cbe2; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.verdict {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}
.verdict.valid { background: #3a2a2a; color: #ff8585; }
.verdict.disputable { background: #3a3220; color: #ffcd5a; }
.verdict.likely_erroneous { background: #1f3a2a; color: #5aff9d; }
.verdict.expired { background: #2a2a2a; color: #888; }
#recommendation { margin-top: 12px; padding: 14px; background: #13162a; border-left: 3px solid #5865f2; border-radius: 6px; }
#recommendation.pay { border-left-color: #ff8585; }
#recommendation.contest { border-left-color: #5aff9d; }
#recommendation.need_more_info { border-left-color: #ffcd5a; }
#strategyBox ol, #strategyBox ul { padding-left: 20px; margin: 8px 0 16px; }
#strategyBox li { font-size: 14px; line-height: 1.6; }
#strategyBox h4 { color: #c8cbe2; margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
#strategyBox p { font-size: 14px; }
#successChance { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #13162a; font-size: 13px; margin-bottom: 8px; }
#countdown { font-size: 28px; font-weight: 700; color: #5aff9d; }
#countdown.warn { color: #ffcd5a; }
#countdown.danger { color: #ff8585; }
#details h4 { color: #c8cbe2; margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
#details p, #details li { color: #e8ebf5; line-height: 1.5; font-size: 14px; }
#details ul.defense { border-left: 3px solid #5aff9d; padding-left: 16px; }
#details ul.defense li::marker { content: "✓ "; color: #5aff9d; }
#details ul.weakness { border-left: 3px solid #ffcd5a; padding-left: 16px; }
#details ul.weakness li::marker { content: "⚠ "; color: #ffcd5a; }
.hint { font-size: 13px; color: #9aa0bf; margin: 0 0 10px; }
.hint a, footer a { color: #8b9cff; }
#chatMessages { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 12px; background: #13162a; border-radius: 8px; margin-bottom: 12px; }
#chatMessages:empty { display: none; }
.msg { padding: 10px 14px; border-radius: 10px; max-width: 85%; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { background: #5865f2; color: white; align-self: flex-end; }
.msg.assistant { background: #2a2f50; color: #e8ebf5; align-self: flex-start; }
.msg.typing { font-style: italic; color: #9aa0bf; }
.chat-input { display: flex; gap: 8px; }
.chat-input textarea { flex: 1; font-size: 14px; }
.chat-input button { padding: 10px 18px; font-size: 14px; }
.fine-type-badge { display: inline-block; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.fine-type-badge.camera { background: #1a2a3a; color: #5ac8ff; }
.fine-type-badge.officer { background: #2a2a1a; color: #ffcd5a; }
.fine-type-badge.radar { background: #1a3a2a; color: #5aff9d; }
.fine-type-badge.court { background: #3a1a2a; color: #ff8585; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }
.doc-field { background: #13162a; border-radius: 8px; padding: 10px 14px; }
.doc-field .label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6a7099; margin-bottom: 3px; }
.doc-field .value { font-size: 14px; color: #e8ebf5; font-weight: 500; }
.doc-field .value a { color: #8b9cff; word-break: break-all; }
#videoGrid .doc-field:has(.label:empty) { display: none; }
.doc-field .value small { color: #9aa0bf; }
.doc-field.wide { grid-column: 1 / -1; }
footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #2a2f50; }
.disclaimer { color: #6a7099; font-size: 12px; line-height: 1.5; }

/* ── Drag & drop active state ── */
.drop.dragover { border-color: #5865f2; background: #1a1e3a; }

/* ── Progress bar ── */
.progress-container { margin-top: 12px; }
.progress-bar { height: 6px; background: #2a2f50; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #5865f2, #8b5cf6); border-radius: 3px; transition: width 0.5s; }
.progress-text { font-size: 12px; color: #9aa0bf; margin-top: 6px; }

/* ── Theme toggle button ── */
.theme-toggle { position: fixed; top: 16px; right: 16px; background: #2a2f50; border: 0; color: #e8ebf5; padding: 8px 12px; border-radius: 8px; cursor: pointer; z-index: 100; font-size: 14px; }
body.light .theme-toggle { background: #e0e0e0; color: #333; }

/* ── Light theme ── */
body.light { background: #f5f6fa; color: #1a1e36; }
body.light footer { border-top-color: #d0d3e8; }
body.light textarea,
body.light input[type=text],
body.light input[type=number],
body.light input[type=date],
body.light select { background: #ffffff; border-color: #c5c8de; color: #1a1e36; }
body.light .drop { border-color: #c5c8de; color: #5a6080; }
body.light .drop.dragover { border-color: #5865f2; background: #e8eaff; }
body.light .drop:hover { border-color: #5865f2; }
body.light .box { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
body.light details { background: #ffffff; border-color: #c5c8de; }
body.light details summary { color: #5a6080; }
body.light #chatMessages { background: #eef0f8; }
body.light .msg.assistant { background: #d8dcf0; color: #1a1e36; }
body.light .verdict.valid { background: #ffe0e0; color: #c0392b; }
body.light .verdict.disputable { background: #fff3cd; color: #856404; }
body.light .verdict.likely_erroneous { background: #d4edda; color: #155724; }
body.light .verdict.expired { background: #e9ecef; color: #555; }
body.light #recommendation { background: #f0f2fc; }
body.light .doc-field { background: #f0f2fc; }
body.light .progress-bar { background: #d0d3e8; }
body.light .disclaimer { color: #8890aa; }