/* anonymize.css — styly specifické pro stránku anonymizéru */
.wrap{max-width:1180px}
.hero{text-align:center;padding:40px 0 30px}
.pill{margin-bottom:18px}
h1{font-size:clamp(30px,5vw,48px)}
.hero p{max-width:600px;font-size:17px}

.examples{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 18px}
.ex{background:var(--panel);border:1px solid var(--line);color:var(--mut);font-size:13px;padding:8px 15px;border-radius:100px;cursor:pointer;transition:.15s}
.ex:hover{border-color:var(--acc);color:var(--txt)}
.upload{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--mut);
  font-size:13px;padding:8px 15px;border-radius:100px;cursor:pointer;transition:.15s}
.upload:hover{border-color:var(--acc);color:var(--txt)}

.panes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.pane .ph{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut)}
textarea{width:100%;min-height:300px;background:transparent;border:none;outline:none;resize:vertical;color:var(--txt);
  font-family:"Cascadia Code",Consolas,monospace;font-size:14.5px;line-height:1.7;padding:18px}
.out{min-height:300px;padding:18px;font-family:"Cascadia Code",Consolas,monospace;font-size:14.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.copy{background:transparent;border:1px solid var(--line);color:var(--mut);font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer}
.copy:hover{border-color:var(--acc);color:var(--txt)}

.ph-tok{border-radius:6px;padding:1px 5px;font-weight:600;border:1px solid transparent}
.t-OSOBA,.t-FIRMA,.t-INSTITUCE{background:rgba(124,92,255,.18);color:#c7b6ff;border-color:rgba(124,92,255,.35)}
.t-MESTO,.t-PSC,.t-ULICE,.t-CP{background:rgba(34,211,238,.15);color:#9be9f5;border-color:rgba(34,211,238,.3)}
.t-TELEFON,.t-EMAIL,.t-URL{background:rgba(74,222,128,.14);color:#a7f3c4;border-color:rgba(74,222,128,.3)}
.t-RC,.t-ICO,.t-DIC,.t-IBAN,.t-UCET,.t-KRYPTO,.t-TOKEN,.t-KARTA,.t-SSN,.t-DSCHRANKA,.t-VIN,.t-DOKID,.t-COP{background:rgba(232,200,138,.14);color:#f0d9a8;border-color:rgba(232,200,138,.3)}
.t-SPZN,.t-DATUM,.t-SPZ,.t-MKN{background:rgba(248,113,113,.13);color:#f8b4b4;border-color:rgba(248,113,113,.3)}

.mode{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 14px}
.mode label{display:flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:100px;
  font-size:14px;color:var(--mut);cursor:pointer;transition:.15s;background:var(--panel)}
.mode label:has(input:checked){border-color:var(--acc);color:var(--txt);background:rgba(124,92,255,.08)}
.mode input{accent-color:var(--acc)}
.nerinfo{text-align:center;font-size:12px;color:var(--mut);margin:-6px 0 14px;min-height:16px}

.stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px;justify-content:center}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:7px 15px;font-size:13px;color:var(--mut)}
.stat b{color:var(--txt)}
.tablewrap{margin:26px 0 50px;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tablewrap .th{padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut);display:flex;justify-content:space-between}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 18px;border-bottom:1px solid var(--panel2)}
th{color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
td.orig{color:var(--mut);font-family:"Cascadia Code",monospace}
td .badge{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:2px 9px}
.empty{padding:26px 18px;color:var(--mut);text-align:center}

.full{margin:10px 0 40px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}
.full h2{font-size:18px;margin-bottom:6px}
.full .fsub{color:var(--mut);font-size:14px;margin-bottom:20px}
.full .tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.full .ti{border:1px solid var(--line);border-radius:12px;padding:14px}
.full .ti b{font-size:14px}
.full .ti span{display:block;color:var(--mut);font-size:13px;margin-top:4px;line-height:1.45}
.full .ti.on{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.06)}

.foot-grid{grid-template-columns:1.8fr 1fr 1fr}

/* responzivita: mobil → ultrawide */
@media(max-width:820px){ .panes{grid-template-columns:1fr} }
@media(max-width:760px){ .full .tg{grid-template-columns:1fr} }
@media(max-width:600px){
  .wrap{padding:0 15px}
  header{padding:16px 0} .hero{padding:26px 0 18px} .hero p{font-size:15px}
  .pill{font-size:12px}
  .examples{gap:8px} .ex{font-size:12px;padding:7px 12px}
  .mode{gap:8px} .mode label{font-size:13px;padding:8px 13px}
  textarea{min-height:200px;font-size:14px;padding:14px}
  .out{min-height:160px;padding:14px;font-size:14px}
  .full{padding:20px} th,td{padding:9px 12px;font-size:13px}
  footer{font-size:12px}
}
@media(max-width:400px){ h1{font-size:28px} .mode label{flex:1 1 100%;justify-content:center} }
@media(min-width:1600px){ .wrap{max-width:1300px} }