*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f6f8;color:#1c1f24}
header.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.2rem;background:#1c2330;color:#fff;flex-wrap:wrap}
header.top nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
header.top a{color:#cfe0ff;text-decoration:none}
header.top a:hover{text-decoration:underline}
main{max-width:1100px;margin:1.2rem auto;padding:0 1rem}
.card{background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:1.1rem}
.card.narrow{max-width:440px;margin:3rem auto}
h1,h2{margin:.1rem 0 .8rem}
h2 small{color:#777;font-weight:400}
label{display:block;margin:.6rem 0;font-weight:600}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid #c9ced6;border-radius:6px;background:#fff}
button{padding:.5rem .9rem;border:1px solid #c9ced6;border-radius:6px;background:#f0f2f5;cursor:pointer}
button.primary{background:#2457d6;color:#fff;border-color:#2457d6}
button.link{background:none;border:none;color:#2457d6;padding:0;cursor:pointer}
button.link.danger,.danger{color:#c0392b}
header.top button.link{color:#cfe0ff}
button.copy{padding:.15rem .55rem;font-size:12px;margin-left:.35rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row input,.row select{width:auto}
.row .grow{flex:1;min-width:220px}
form.inline{display:inline}
.flash{padding:.6rem .9rem;border-radius:6px;margin-bottom:1rem}
.flash.ok{background:#e6f6ec;border:1px solid #9bd3ae}
.flash.error{background:#fdecea;border:1px solid #f1aeb5}
.result{background:#eef4ff;border:1px solid #c7d8ff;border-radius:8px;padding:.8rem 1rem;margin-top:.9rem}
.result div{margin:.35rem 0}
.tag{display:inline-block;background:#2457d6;color:#fff;border-radius:4px;font-size:12px;padding:0 .4rem;margin-right:.4rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:13px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #eceff2;vertical-align:middle}
th{font-size:12px;text-transform:uppercase;color:#666}
td.dest{max-width:240px}
td.actions{white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.muted{color:#777}
.pager a{display:inline-block;padding:.1rem .5rem;margin-right:.2rem;border:1px solid #c9ced6;border-radius:4px;text-decoration:none;color:#2457d6}
.pager a.cur{background:#2457d6;color:#fff}
.bulk-bar{background:#f8f9fb;border:1px solid #d0d7de;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.bulk-bar strong{font-size:13px}

/* Compact mobile-friendly link rules */
.link-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.link-pill-lg{display:inline-block;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;background:#f1f4f9;border:1px solid #d0d7e2;border-radius:6px;padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}
.cell-link{min-width:170px;max-width:260px}
.link-wrap{display:inline-flex;align-items:center;gap:.35rem;max-width:100%}
.link-code{display:inline-block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:#f1f4f9;border:1px solid #d0d7e2;border-radius:5px;padding:2px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#1e293b}
.sub-link{margin-top:2px}
.sub-code{display:inline-block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#64748b}
.dest-truncate{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
button.copy{padding:.2rem .55rem;font-size:11.5px;font-weight:600;border-radius:5px;background:#eef2f7;color:#1e293b;border:1px solid #cbd5e1;cursor:pointer;transition:all .15s ease;white-space:nowrap}
button.copy:hover{background:#2457d6;color:#fff;border-color:#2457d6}
button.copy.copied{background:#10b981;color:#fff;border-color:#10b981}

@media (max-width:768px){
  body{font-size:14px}
  header.top{padding:.6rem .8rem}
  header.top nav{gap:.6rem;font-size:13px}
  main{padding:0 .5rem;margin:.7rem auto}
  .card{padding:.85rem;border-radius:8px;margin-bottom:.8rem}
  .card h1,.card h2{font-size:1.2rem}
  .link-pill-lg{max-width:230px;font-size:11.5px}
  .cell-link{min-width:135px;max-width:170px}
  .link-code{max-width:105px;font-size:11px;padding:1px 4px}
  .sub-code{max-width:105px}
  .dest-truncate{max-width:105px}
  td.dest{max-width:115px}
  th,td{padding:.35rem .3rem;font-size:12px}
  button.copy{padding:.15rem .35rem;font-size:10.5px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e3e6ea;border-radius:6px}
  .table-wrap table{min-width:500px}
  .row{flex-direction:column;align-items:stretch;gap:.4rem}
  .row input,.row select,.row button{width:100%!important}
  .bulk-bar{flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem}
  .bulk-bar .row{margin-left:0!important;width:100%}
  .bulk-bar select,.bulk-bar input,.bulk-bar button{width:100%!important}
}