.nal,.nrt{--ntl-line:#e6eaf2;--ntl-ink:#0c1222;--ntl-mut:#5b6a86;--ntl-b1:#2563eb;--ntl-b2:#0ea5e9;
  border:1px solid var(--ntl-line);border-radius:16px;background:#fff;padding:18px;margin:26px 0;
  box-shadow:0 8px 28px rgba(12,18,34,.06);font-size:15.5px;line-height:1.5}
.nal *,.nrt *{box-sizing:border-box}

/* верхняя панель направления */
.nal__bar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin-bottom:14px}
.nal__bar label>span,.nrt label>span{display:block;font-size:13px;color:var(--ntl-mut);margin-bottom:5px}
.nal select{width:100%;border:1px solid var(--ntl-line);border-radius:10px;padding:10px 12px;font:inherit;
  font-size:15px;color:var(--ntl-ink);background:#fff}
.nal select:focus,.nal textarea:focus,.nrt textarea:focus{outline:none;border-color:var(--ntl-b1);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.nal__swap{border:1px solid var(--ntl-line);background:#f7f9fc;border-radius:10px;width:44px;height:42px;
  font-size:18px;line-height:1;cursor:pointer;color:var(--ntl-mut);transition:all .2s}
.nal__swap:hover{color:var(--ntl-b1);border-color:var(--ntl-b1);transform:translateY(-1px)}

.nal__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nal__side{display:flex;flex-direction:column;min-width:0}
.nal textarea,.nrt textarea{width:100%;min-height:190px;resize:vertical;border:1px solid var(--ntl-line);
  border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ntl-ink);background:#fff}
.nal__out,.nrt__out{background:#f7f9fc!important}
.nal__foot,.nrt__foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;min-height:38px}
.nal__cnt-w,.nrt__cnt-w{font-size:12.5px;color:var(--ntl-mut);margin-left:auto}

.ntl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ntl-line);
  background:#fff;color:var(--ntl-ink);border-radius:10px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;
  transition:all .2s cubic-bezier(.22,.61,.36,1)}
.ntl-btn:hover{border-color:var(--ntl-b1);color:var(--ntl-b1);transform:translateY(-1px)}
.ntl-btn--primary{background:linear-gradient(135deg,var(--ntl-b1),var(--ntl-b2));border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(37,99,235,.28)}
.ntl-btn--primary:hover{color:#fff}
.ntl-btn.is-on{background:linear-gradient(135deg,var(--ntl-b1),var(--ntl-b2));border-color:transparent;color:#fff}

.nal__chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ntl-ink);cursor:pointer}
.nal__chk input,.nrt__opts input{width:17px;height:17px;accent-color:var(--ntl-b1)}

.nal__stats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--ntl-line)}
.nal__stats-t{font-size:12.5px;color:var(--ntl-mut);margin-right:2px}
.nal__chip{font-size:12.5px;background:rgba(37,99,235,.08);color:#1d4ed8;border-radius:999px;padding:3px 10px}
.nal__chip b{font-weight:700}
.nal__same{margin:12px 0 0;font-size:12.5px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;
  border-radius:8px;padding:8px 10px}
.nal__demos,.nrt__demos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.nal__demos span,.nrt__demos span{font-size:12.5px;color:var(--ntl-mut)}
.nal__demo,.nrt__demo{font-size:12.5px;border:1px dashed var(--ntl-line);background:#fbfcfe;border-radius:999px;
  padding:4px 11px;cursor:pointer;color:var(--ntl-mut);font-family:inherit}
.nal__demo:hover,.nrt__demo:hover{color:var(--ntl-b1);border-color:var(--ntl-b1)}
.nal__hint,.nrt__desc{margin:12px 0 0;font-size:12.5px;color:var(--ntl-mut);
  border-left:3px solid rgba(37,99,235,.35);padding-left:10px}

/* русский транслит */
.nrt__tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--ntl-line);
  padding-bottom:12px}
.nrt__tab{border:1px solid var(--ntl-line);background:#f7f9fc;color:var(--ntl-mut);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;transition:all .2s}
.nrt__tab:hover{color:var(--ntl-ink);border-color:#cfd8e8}
.nrt__tab.is-on{background:linear-gradient(135deg,var(--ntl-b1),var(--ntl-b2));border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.28)}
.nrt__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nrt__side{display:flex;flex-direction:column;min-width:0}
.nrt__lbl{font-size:13px;color:var(--ntl-mut);margin:0 0 5px}
.nrt__opts{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--ntl-line)}
.nrt__opts label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ntl-ink);cursor:pointer}

@media(max-width:820px){
  .nal__grid,.nrt__grid{grid-template-columns:1fr}
  .nal__bar{grid-template-columns:1fr auto 1fr;gap:6px}
  .nal select{font-size:14px;padding:9px 8px}
  .nal textarea,.nrt textarea{min-height:150px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.ntl-btn:hover,.nal__swap:hover{transform:none}}

/* ---- конвертер имён ---- */
.nun{margin:18px 0}
.nun__in{width:100%;box-sizing:border-box;padding:14px 16px;font-size:20px;line-height:1.3;border:1px solid var(--ntl-line);border-radius:12px;color:var(--ntl-ink);outline:none}
.nun__in:focus{border-color:var(--ntl-b1);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.nun__demos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 4px;font-size:14px;color:var(--ntl-mut)}
.nun__demo{border:1px solid var(--ntl-line);background:#fff;border-radius:999px;padding:5px 12px;font-size:14px;color:var(--ntl-ink);cursor:pointer}
.nun__demo:hover{border-color:var(--ntl-b1);color:var(--ntl-b1)}
.nun__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.nun__card{border:1px solid var(--ntl-line);border-radius:12px;padding:12px 14px;background:#fff;position:relative}
.nun__k{font-size:13px;color:var(--ntl-mut);margin-bottom:4px}
.nun__v{font-size:20px;font-weight:600;color:var(--ntl-ink);word-break:break-word;min-height:26px}
.nun__copy{margin-top:8px;font-size:13px;padding:5px 12px}
.nun__mrz{margin-top:8px;font-size:12px;color:var(--ntl-mut)}
.nun__mrz code{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}
.nun__alts{margin:6px 0 10px;font-size:14px;color:var(--ntl-mut)}
.nun__alts b{color:var(--ntl-ink);font-weight:600}
.nun__note{margin:6px 0;padding:10px 12px;border-left:3px solid var(--ntl-b2);background:#f4f9ff;border-radius:0 8px 8px 0;font-size:14px;color:var(--ntl-ink)}
.nun__hint{font-size:13px;color:var(--ntl-mut);margin-top:10px}
@media(max-width:820px){.nun__cards{grid-template-columns:1fr}.nun__in{font-size:18px}}