*{box-sizing:border-box}
body{
  margin:0;background:#0b1020;color:#f5f7ff;
  font-family:Tahoma,Arial,sans-serif;line-height:1.9
}
.container{width:min(100% - 30px,950px);margin:auto}
header{padding:22px 0;background:#141c30;border-bottom:1px solid #2b3854}
h1{margin:0;color:#91aaff}
.subtitle,.muted{color:#b7c1d8}
.hero{text-align:center;padding:35px 0}
.hero h2{font-size:clamp(24px,5vw,36px)}
.card{
  background:#141c30;border:1px solid #2b3854;
  border-radius:18px;padding:22px;margin-bottom:18px
}
input,textarea,button{
  width:100%;padding:12px;margin-top:8px;
  border-radius:10px;font:inherit
}
input,textarea{
  background:#0b1020;color:white;border:1px solid #354363
}
label{display:block;margin-top:12px}
button{
  background:#91aaff;color:#0b1020;border:0;
  font-weight:bold;cursor:pointer
}
button:hover{filter:brightness(1.08)}
.result{
  margin-top:14px;padding:14px;background:#0b1020;
  border:1px solid #354363;border-radius:10px;overflow-wrap:anywhere
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tool-link{padding:15px;background:#1b2740;border-radius:12px;text-align:center}
#qr-image{display:block;max-width:100%;margin:18px auto;background:white;padding:10px;border-radius:8px}
footer{text-align:center;color:#b7c1d8;padding:25px}
small{color:#b7c1d8}

/* Homepage tool catalogue */
.catalog-hero {
      padding: 42px 0 28px;
      text-align: center;
    }

    .catalog-hero h2 {
      font-size: clamp(26px, 5vw, 40px);
      line-height: 1.6;
      margin-bottom: 10px;
    }

    .hero-description {
      max-width: 680px;
      margin: 0 auto 24px;
      color: #b7c1d8;
    }

    .search-box {
      max-width: 650px;
      margin: 24px auto 12px;
    }

    .search-box input {
      min-height: 54px;
      font-size: 16px;
    }

    .catalog-meta {
      color: #b7c1d8;
      text-align: center;
      margin: 12px 0 28px;
    }

    .catalog-section {
      padding: 8px 0 24px;
    }

    .catalog-section > h2 {
      font-size: 23px;
      margin-bottom: 18px;
    }

    .tool-card {
      display: flex;
      flex-direction: column;
      min-height: 190px;
      padding: 20px;
      border: 1px solid #2b3854;
      border-radius: 16px;
      background: #141c30;
      color: #f5f7ff;
      text-decoration: none;
      transition: transform .18s ease, border-color .18s ease;
    }

    .tool-card:hover,
    .tool-card:focus-visible {
      transform: translateY(-3px);
      border-color: #91aaff;
      outline: none;
    }

    .tool-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-bottom: 12px;
      border-radius: 12px;
      background: #253454;
      color: #c4d1ff;
      font-size: 22px;
      font-weight: bold;
    }

    .tool-card h3 {
      margin: 0 0 8px;
      color: #91aaff;
      font-size: 18px;
    }

    .tool-card p {
      margin: 0 0 16px;
      color: #b7c1d8;
      font-size: 14px;
      line-height: 1.9;
    }

    .tool-action {
      margin-top: auto;
      color: #c4d1ff;
      font-size: 14px;
      font-weight: bold;
    }

    .privacy-note {
      margin: 8px 0 28px;
      padding: 18px;
      border: 1px solid #2b3854;
      border-radius: 14px;
      color: #b7c1d8;
      background: #10182a;
    }

    .empty-state {
      display: block;
      text-align: center;
      padding: 24px;
      color: #b7c1d8;
    }

    .skip-link {
      position: absolute;
      top: -100px;
      right: 12px;
      z-index: 10;
      padding: 10px;
      background: #91aaff;
      color: #0b1020;
    }

    .skip-link:focus {
      top: 12px;
    }

    @media (prefers-reduced-motion: reduce) {
      .tool-card {
        transition: none;
      }

      .tool-card:hover {
        transform: none;
      }
    }

/* Header title link */
.site-title-link{color:inherit;text-decoration:none}


.empty-state[hidden] {
  display: none;
}

.qr-download-link {
  display: block;
  margin-top: 16px;
}

/* Developer tools catalogue and upgraded shared tool UI */
.catalog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px auto 8px}
.catalog-filter{width:auto;min-width:118px;margin:0;padding:9px 16px;border:1px solid #354363;border-radius:999px;background:#141c30;color:#dce4ff;font-size:14px}
.catalog-filter[aria-pressed="true"]{background:#91aaff;color:#0b1020;border-color:#91aaff}
.catalog-filter:focus-visible,.tool-page button:focus-visible,.tool-page input:focus-visible,.tool-page textarea:focus-visible,.tool-page select:focus-visible{outline:3px solid #c4d1ff;outline-offset:2px}
.tool-card[data-category="developer"]{border-color:#435b88;background:linear-gradient(145deg,#17233b,#141c30)}
.tool-card[data-category="developer"] .tool-icon{background:#344a72;color:#e2eaff}
.tool-kicker{display:inline-block;margin:0 0 8px;padding:3px 12px;border:1px solid #435b88;border-radius:999px;color:#c4d1ff;font-size:13px}
.tool-page .hero{padding:30px 0 20px}
.tool-page .hero h2{margin:4px 0 8px}
.tool-page .card{margin-bottom:18px}
.tool-page .card h2{margin-top:0}
.tool-page textarea{min-height:130px;resize:vertical;line-height:1.7}
.tool-page input[type="text"],.tool-page input[type="number"],.tool-page input[type="datetime-local"],.tool-page select{min-height:46px}
.tool-page .tool-code{direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;unicode-bidi:plaintext;tab-size:2}
.tool-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tool-toolbar button{flex:1 1 145px;width:auto;margin:0;min-height:46px}
.tool-page button{min-height:46px}
.tool-page .secondary-button{background:#253454;color:#e2eaff;border:1px solid #435b88}
.tool-inline-field{display:flex;align-items:center;gap:8px;flex:1 1 180px;margin:0}
.tool-inline-field select{max-width:130px;margin:0}
.tool-help,.tool-page .muted{color:#b7c1d8}
.tool-status{min-height:1.8em;margin:12px 0 0;color:#c4d1ff;overflow-wrap:anywhere}
.tool-result-list{padding:12px 16px;border:1px solid #354363;border-radius:12px;background:#0b1020;overflow-wrap:anywhere}
.tool-result-list p{margin:8px 0}
.tool-page output{direction:ltr;unicode-bidi:plaintext;overflow-wrap:anywhere}
.tool-checks{margin:14px 0;padding:14px;border:1px solid #354363;border-radius:12px}
.tool-checks label{display:inline-flex;align-items:center;gap:8px;margin:7px 16px 7px 0}
.tool-checks input{width:auto;margin:0}
.tool-warning{border-color:#80643a;background:#211c14}
.regex-match-list li{margin:10px 0;padding:12px;border-radius:10px;background:#0b1020;overflow-wrap:anywhere}
.regex-match-list p{direction:ltr;text-align:left;unicode-bidi:plaintext;overflow-wrap:anywhere}
.tool-privacy{border-style:dashed}
@media(max-width:600px){.tool-page .card{padding:16px}.tool-toolbar{display:grid;grid-template-columns:1fr 1fr}.tool-toolbar button{min-width:0}.catalog-filters{gap:7px}.catalog-filter{min-width:0;flex:1 1 42%}}