:root { --bg: #0b0f14; --fg: #e5e7eb; --muted: #94a3b8; --accent: #22d3ee; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --tile: #111827; --border: #1f2937; }
[data-theme="light"] { --bg: #f7fafc; --fg: #0b0f14; --muted: #4b5563; --accent: #0891b2; --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --tile: #ffffff; --border: #e5e7eb; }
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg); transition: background-color .2s ease, color .2s ease }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border) }
.app-header h1 { margin: 0; font-size: 18px }
.webhook-config { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.webhook-config label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted) }
.webhook-config input[type=url] { width: 280px; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile); color: var(--fg) }
.toggle { gap: 6px }
.theme-toggle button { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile); color: var(--fg); cursor: pointer }
.app-main { display: grid; grid-template-columns: 1fr 320px; gap: 12px; padding: 12px }
.panel { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(17,24,39,0.6); backdrop-filter: blur(6px) }
[data-theme="light"] .panel { background: rgba(255,255,255,0.7) }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border) }
.panel-title { font-weight: 600; font-size: 14px }
.inputs-duo { display: flex; gap: 10px; align-items: center }
.file-input { display: inline-flex; align-items: center; gap: 8px }
.file-input input { display: none }
.file-input span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); cursor: pointer }
.searchbar input { width: 340px; max-width: 48vw; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile); color: var(--fg) }
.hl { background: rgba(34, 211, 238, 0.18); color: inherit; padding: 0 2px; border-radius: 2px }
[data-theme="light"] .hl { background: rgba(8, 145, 178, 0.18) }
.comparison-rows { display: grid; gap: 8px; padding: 10px }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--tile); overflow: hidden; cursor: pointer; transition: box-shadow .15s ease }
.cmp-row.ok { border-color: #14532d; box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.08) }
.cmp-row.bad { border-color: #7f1d1d; box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.10) }
.cmp-row.ok:hover { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.14) }
.cmp-row.bad:hover { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.16) }
.cmp-cell { padding: 10px; display: grid; gap: 6px }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline }
.cmp-date { font-weight: 600; color: var(--muted) }
.cmp-amount { font-weight: 700 }
.cmp-type { font-size: 12px; color: var(--muted) }
.cmp-vendor { font-size: 12px }
.cmp-iban { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; color: var(--muted) }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border) }
.badge.ok { color: var(--ok); border-color: #14532d }
.badge.warn { color: var(--warn); border-color: #7c2d12 }
.badge.bad { color: var(--bad); border-color: #7f1d1d }

.loading-status { padding: 10px; display: flex; gap: 8px; align-items: center; color: var(--muted) }
.loading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dots 0.9s infinite ease-in-out }
.loading-dot:nth-child(2) { animation-delay: .15s }
.loading-dot:nth-child(3) { animation-delay: .30s }
@keyframes dots { 0%, 80%, 100% { transform: scale(0) } 40% { transform: scale(1) } }

.skeleton { position: relative }
.skeleton .cmp-cell { position: relative }
.skeleton .sk-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); animation: shimmer 1.2s infinite }
[data-theme="light"] .skeleton .sk-line { background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.08), rgba(0,0,0,0.05)) }
.skeleton .sk-line.small { width: 40% }
.skeleton .sk-line.medium { width: 70% }
.skeleton .sk-line.large { width: 90% }
@keyframes shimmer { 0% { background-position: -200px 0 } 100% { background-position: 200px 0 } }
.summary { border: 1px solid var(--border); border-radius: 12px; background: rgba(17,24,39,0.6); backdrop-filter: blur(6px) }
.summary-header { padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600 }
.summary-content { padding: 10px 12px; display: grid; gap: 10px }
.summary .item { display: flex; justify-content: space-between }
.filters { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border) }
.filters button { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile); color: var(--fg); cursor: pointer }
.filters button:focus { outline: 2px solid var(--accent) }

@media (max-width: 768px) {
  .app-main { grid-template-columns: 1fr }
  .cmp-row { grid-template-columns: 1fr }
  .webhook-config input[type=url] { width: 100% }
  .searchbar input { width: 100%; max-width: 100% }
  .filters { flex-wrap: wrap }
  .filters button { flex: 1 1 auto }
}

.modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s ease }
.modal-overlay.show { opacity: 1; pointer-events: auto }
.modal { width: min(900px, 92vw); max-height: 86vh; overflow: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--tile); transform: scale(.96) translateY(8px); transition: transform .25s ease, box-shadow .25s ease }
[data-theme="light"] .modal { background: var(--tile) }
.modal.show { transform: scale(1) translateY(0); box-shadow: 0 20px 60px rgba(0,0,0,.35) }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border) }
.modal-title { font-weight: 600 }
.modal-actions button { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--tile); color: var(--fg); cursor: pointer }
.modal-body { padding: 12px }
.modal-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px }
.modal-meta .badge { font-weight: 600 }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.modal-card { border: 1px solid var(--border); border-radius: 12px; background: var(--tile); padding: 12px; display: grid; gap: 8px }
.modal-card.ok { border-color: #14532d }
.modal-card.bad { border-color: #7f1d1d }
.modal-card .head { display: flex; justify-content: space-between; align-items: baseline }
.modal-card .date { color: var(--muted); font-weight: 600 }
.modal-card .amount { font-weight: 700 }
.modal-card .type { font-size: 12px; color: var(--muted) }
.modal-card .iban { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; color: var(--muted) }
.modal-card .vendor { font-size: 12px }
.modal-card .desc { font-size: 12px }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }
@keyframes slideRight { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: translateX(0) } }
.modal-card.left { animation: slideLeft .28s ease both }
.modal-card.right { animation: slideRight .28s ease both }

@media (max-width: 768px) {
  .modal-grid { grid-template-columns: 1fr }
}