/* XMLBankConverter — fintech stil, ograničen na .xbc da ne utiče na temu.
   Layout: hero → kartica aplikacije (1 banka, 2 izvod, rezultat sa pregledom) → prednosti → partneri */
.xbc{
  --xbc-bg:#f2f5f9;
  --xbc-card:#ffffff;
  --xbc-ink:#0b1630;
  --xbc-muted:#5b6782;
  --xbc-line:#e1e6ef;
  --xbc-soft:#f6f8fb;
  --xbc-accent:#0f766e;
  --xbc-accent-ink:#ffffff;
  --xbc-credit:#0e8a5f;
  --xbc-debit:#c2364a;
  --xbc-shadow:0 1px 2px rgba(11,22,48,.04),0 18px 48px -18px rgba(11,22,48,.18);
  --xbc-sans:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --xbc-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  background:var(--xbc-bg);color:var(--xbc-ink);font-family:var(--xbc-sans);font-size:15px;line-height:1.55;
  border-radius:20px;color-scheme:light;
}
.xbc--dark{
  --xbc-bg:#081120;
  --xbc-card:#0f1b2e;
  --xbc-ink:#e7edf7;
  --xbc-muted:#8d9bb4;
  --xbc-line:#1f2d45;
  --xbc-soft:#0b1627;
  --xbc-accent:#2dd4bf;
  --xbc-accent-ink:#04201c;
  --xbc-credit:#34d399;
  --xbc-debit:#fb7185;
  --xbc-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  color-scheme:dark;
}
/* Puna širina: izlazi iz uske kolone teme, od ivice do ivice ekrana */
.xbc--full{border-radius:0;width:calc(100vw - var(--xbc-sbw,0px));max-width:none;margin-left:calc(50% - (100vw - var(--xbc-sbw,0px)) / 2)}
.xbc *,.xbc *::before,.xbc *::after{box-sizing:border-box}
.xbc-wrap{max-width:960px;margin:0 auto;padding:clamp(28px,6vw,64px) clamp(16px,4vw,32px);display:flex;flex-direction:column;gap:28px}
.xbc-ic{width:18px;height:18px;flex:0 0 auto}

/* Hero */
.xbc-hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.xbc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--xbc-accent);
  background:color-mix(in srgb,var(--xbc-accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--xbc-accent) 22%,transparent);
  padding:6px 12px;border-radius:999px}
.xbc-eyebrow .xbc-ic{width:15px;height:15px}
.xbc .xbc-title{font-family:var(--xbc-sans);font-size:clamp(28px,4.6vw,46px);line-height:1.08;font-weight:750;letter-spacing:-.03em;
  margin:0;padding:0;color:var(--xbc-ink);text-wrap:balance;text-transform:none;border:0}
.xbc-lead{margin:0;max-width:58ch;color:var(--xbc-muted);font-size:16px;text-wrap:balance}

/* Kartica aplikacije */
.xbc-app{background:var(--xbc-card);border:1px solid var(--xbc-line);border-radius:18px;box-shadow:var(--xbc-shadow);
  padding:clamp(18px,3.4vw,32px);display:flex;flex-direction:column;gap:14px}
.xbc-step{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--xbc-muted)}
.xbc-step span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;letter-spacing:0;
  background:var(--xbc-ink);color:var(--xbc-card)}
.xbc-step:not(:first-child){margin-top:10px}

/* Izbor banke */
.xbc-banks{display:grid;grid-template-columns:repeat(var(--xbc-cols,3),minmax(0,1fr));gap:10px}
@media (max-width:640px){.xbc-banks{grid-template-columns:1fr}}
.xbc .xbc-bank{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px auto;
  gap:8px 10px;padding:14px 16px;border:1.5px solid var(--xbc-line);border-radius:14px;background:var(--xbc-card);
  transition:border-color .18s,box-shadow .18s,transform .18s;min-width:0}
.xbc .xbc-bank:hover{border-color:color-mix(in srgb,var(--xbc-accent) 45%,var(--xbc-line))}
.xbc .xbc-bank:focus-visible{outline:2px solid var(--xbc-accent);outline-offset:2px}
.xbc .xbc-bank[aria-checked="true"]{border-color:var(--xbc-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--xbc-accent) 12%,transparent)}
.xbc-bank-logo{grid-column:1/2;display:flex;align-items:center;min-width:0;height:44px}
.xbc-bank-logo img{max-height:34px;max-width:130px;object-fit:contain;display:block}
.xbc--dark .xbc-bank-logo img{background:#fff;border-radius:6px;padding:3px 6px}
.xbc-wordmark{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--xbc-ink)}
.xbc-bank-name{grid-column:1/2;font-size:13px;color:var(--xbc-muted);min-width:0;overflow-wrap:anywhere}
.xbc-chip{grid-column:2/3;grid-row:2/3;align-self:end;font-family:var(--xbc-mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:3px 7px;border-radius:6px;background:var(--xbc-soft);border:1px solid var(--xbc-line);color:var(--xbc-muted)}
.xbc-radio{grid-column:2/3;grid-row:1/2;justify-self:end;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--xbc-line);
  display:grid;place-items:center;transition:.18s}
.xbc-bank[aria-checked="true"] .xbc-radio{border-color:var(--xbc-accent);background:var(--xbc-accent)}
.xbc-bank[aria-checked="true"] .xbc-radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--xbc-accent-ink)}

/* Upload */
.xbc-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 20px;cursor:pointer;
  border:1.5px dashed color-mix(in srgb,var(--xbc-muted) 40%,transparent);border-radius:14px;background:var(--xbc-soft);transition:.18s}
.xbc-drop:hover,.xbc-drop.is-drag{border-color:var(--xbc-accent);background:color-mix(in srgb,var(--xbc-accent) 6%,var(--xbc-soft))}
.xbc-drop:focus-visible{outline:2px solid var(--xbc-accent);outline-offset:2px}
.xbc-drop-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;
  background:var(--xbc-card);border:1px solid var(--xbc-line);color:var(--xbc-accent)}
.xbc-drop-ic .xbc-ic{width:22px;height:22px}
.xbc-drop-title{font-weight:650;font-size:15px}
.xbc-drop-sub{font-size:13px;color:var(--xbc-muted)}
.xbc-drop.is-hidden{display:none}

.xbc-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--xbc-line);border-radius:12px;background:var(--xbc-soft)}
.xbc-file-ic{color:var(--xbc-accent);display:grid}
.xbc-file-ic .xbc-ic{width:24px;height:24px}
.xbc-file-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.xbc-file-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbc-file-size{font-size:12px;color:var(--xbc-muted)}
.xbc .xbc-file-x{all:unset;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--xbc-muted)}
.xbc .xbc-file-x:hover{background:var(--xbc-line);color:var(--xbc-ink)}
.xbc .xbc-file-x:focus-visible{outline:2px solid var(--xbc-accent)}

/* Akcije */
.xbc-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.xbc-flow{display:flex;align-items:center;gap:10px;color:var(--xbc-muted);font-size:13px;font-weight:600}
.xbc-flow .xbc-ic{width:16px;height:16px}
.xbc-mm{height:18px;width:auto;display:block}
.xbc--dark .xbc-mm{background:#fff;border-radius:4px;padding:2px 4px;height:22px}
.xbc .xbc-go{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:12px;background:var(--xbc-accent);color:var(--xbc-accent-ink);font-weight:700;font-size:15px;
  transition:filter .18s,transform .12s,box-shadow .18s;box-shadow:0 8px 22px -10px var(--xbc-accent)}
.xbc .xbc-go:hover:not(:disabled){filter:brightness(1.07)}
.xbc .xbc-go:active:not(:disabled){transform:translateY(1px)}
.xbc .xbc-go:focus-visible{outline:2px solid var(--xbc-ink);outline-offset:3px}
.xbc .xbc-go:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.xbc-go-txt{display:inline-flex;align-items:center;gap:8px}
.xbc-spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:xbc-spin .7s linear infinite}
.xbc-go.is-loading .xbc-go-txt{visibility:hidden}
.xbc-go.is-loading .xbc-spin{display:block;position:absolute}
@keyframes xbc-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.xbc .xbc-go{width:100%}.xbc-actions{flex-direction:column-reverse;align-items:stretch}.xbc-flow{justify-content:center}}

/* Poruke */
.xbc-msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:14px}
.xbc-msg[hidden]{display:none}
.xbc-msg.is-error{background:color-mix(in srgb,var(--xbc-debit) 8%,var(--xbc-card));border:1px solid color-mix(in srgb,var(--xbc-debit) 30%,transparent);color:var(--xbc-debit)}
.xbc-msg.is-info{background:color-mix(in srgb,var(--xbc-accent) 8%,var(--xbc-card));border:1px solid color-mix(in srgb,var(--xbc-accent) 28%,transparent);color:var(--xbc-ink)}
.xbc-msg .xbc-ic{margin-top:2px}

/* Rezultat */
.xbc-result{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--xbc-line);padding-top:18px;margin-top:4px}
.xbc-result[hidden]{display:none}
.xbc-result-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.xbc-ok{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--xbc-credit) 12%,transparent);color:var(--xbc-credit)}
.xbc-result-title{display:flex;flex-direction:column;flex:1 1 220px;min-width:0}
.xbc-result-title b{font-size:16px}
.xbc-result-title small{font-family:var(--xbc-mono);font-size:12px;color:var(--xbc-muted);overflow-wrap:anywhere}
.xbc-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.xbc .xbc-dl{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:10px;text-decoration:none;
  background:var(--xbc-ink);color:var(--xbc-card);font-weight:700;font-size:14px}
.xbc .xbc-dl:hover{filter:brightness(1.15);color:var(--xbc-card)}
.xbc .xbc-dl:focus-visible{outline:2px solid var(--xbc-accent);outline-offset:2px}
.xbc .xbc-again{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:10px;
  border:1px solid var(--xbc-line);font-weight:600;font-size:14px;color:var(--xbc-ink)}
.xbc .xbc-again:hover{background:var(--xbc-soft)}
.xbc .xbc-again:focus-visible{outline:2px solid var(--xbc-accent)}

.xbc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--xbc-line);
  border:1px solid var(--xbc-line);border-radius:12px;overflow:hidden}
@media (max-width:640px){.xbc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xbc-stats div{background:var(--xbc-card);padding:12px 14px;min-width:0}
.xbc-stats dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--xbc-muted)}
.xbc-stats dd{margin:3px 0 0;font-family:var(--xbc-mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xbc-stats .is-credit dd{color:var(--xbc-credit)}
.xbc-stats .is-debit dd{color:var(--xbc-debit)}
.xbc-stats .is-balance{background:var(--xbc-soft)}
.xbc-stats .is-balance dd{font-size:17px}

.xbc-table-wrap{max-height:360px;overflow:auto;border:1px solid var(--xbc-line);border-radius:12px}
.xbc .xbc-table{width:100%;border-collapse:collapse;font-size:13px;margin:0;border:0;min-width:560px}
.xbc-caption{caption-side:top;text-align:left;padding:10px 14px;font-size:12px;color:var(--xbc-muted);background:var(--xbc-soft);border-bottom:1px solid var(--xbc-line)}
.xbc .xbc-table th{position:sticky;top:0;background:var(--xbc-card);text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--xbc-muted);padding:9px 14px;border:0;border-bottom:1px solid var(--xbc-line)}
.xbc .xbc-table td{padding:10px 14px;border:0;border-bottom:1px solid var(--xbc-line);vertical-align:top;color:var(--xbc-ink);background:transparent}
.xbc .xbc-table tr:last-child td{border-bottom:0}
.xbc .xbc-table .num{text-align:right;white-space:nowrap;font-family:var(--xbc-mono);font-variant-numeric:tabular-nums;font-weight:600}
.xbc-table td:first-child{white-space:nowrap;font-family:var(--xbc-mono);font-variant-numeric:tabular-nums;color:var(--xbc-muted)}
.xbc-table td small{display:block;font-family:var(--xbc-mono);font-size:11px;color:var(--xbc-muted)}
.xbc .xbc-table td.is-credit{color:var(--xbc-credit)}
.xbc .xbc-table td.is-debit{color:var(--xbc-debit)}
@media (max-width:640px){.xbc .xbc-table{min-width:0}.xbc .xbc-table thead{display:none}.xbc .xbc-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--xbc-line)}.xbc .xbc-table tbody tr:last-child{border-bottom:0}.xbc .xbc-table td{display:block;padding:0;border:0;min-width:0}.xbc .xbc-table td:first-child{grid-column:1/-1;font-size:11px}.xbc .xbc-table td:nth-child(2){grid-column:1;overflow-wrap:anywhere}.xbc .xbc-table td:nth-child(3){grid-column:1;font-size:12px;color:var(--xbc-muted)}.xbc .xbc-table td.num{grid-column:2;grid-row:2}.xbc-stats dd{font-size:14px}.xbc-stats .is-balance dd{font-size:15px}}

/* Prednosti */
.xbc .xbc-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.xbc .xbc-features{grid-template-columns:1fr}}
.xbc-features li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0;border:1px solid var(--xbc-line);border-radius:14px;background:color-mix(in srgb,var(--xbc-card) 60%,transparent)}
.xbc-features .xbc-ic{color:var(--xbc-accent);margin-top:2px}
.xbc-features b{display:block;font-size:14px}
.xbc-features span{display:block;font-size:13px;color:var(--xbc-muted)}

/* Partneri */
.xbc-partners{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.xbc-partners-title{margin:0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--xbc-muted)}
.xbc-partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.xbc-partner-grid{grid-template-columns:1fr}}
.xbc .xbc-partner{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--xbc-line);border-radius:14px;
  background:var(--xbc-card);color:var(--xbc-ink);text-decoration:none;transition:border-color .18s}
.xbc .xbc-partner:hover{border-color:color-mix(in srgb,var(--xbc-accent) 40%,var(--xbc-line));color:var(--xbc-ink)}
.xbc-partner-logo{flex:0 0 96px;display:flex;align-items:center}
.xbc-partner-logo img{max-height:32px;max-width:96px;object-fit:contain}
.xbc--dark .xbc-partner-logo img{background:#fff;border-radius:6px;padding:3px 6px}
.xbc-partner b{display:block;font-size:13px}
.xbc-partner small{display:block;font-size:12px;color:var(--xbc-muted);line-height:1.4}

@media (prefers-reduced-motion:reduce){.xbc *{transition:none!important}.xbc-spin{animation-duration:2s}}