html, body { height: 100%; }
    body {
      min-height: 100vh;   
      display: flex;
      flex-direction: column;  
      line-height: 1.2;
    }
    

    main { flex: 1; }        


    footer {
      margin-top: auto;         
      background: #1b1f24;    
      border-top: 1px solid #2a2f36;   
      color: #d1d6db;                  
    }
    footer .container {
      color: inherit;
      max-width: 980px;
      margin: 0 auto;
      padding: 0.45rem 0.7rem;
      display: flex;
      gap: .45rem;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      font-size: .9rem;
    }
    footer .muted { color: #9aa3ab; } 
    footer nav ul {
      margin: 0; padding: 0;
      list-style: none;
      display: flex; gap: .5rem;
    }
    footer a {   
      color: #cbd5e1;               
    text-decoration: none; }
    footer a:hover { color: #ffffff; text-decoration: underline; }

    table.striped tbody tr:nth-child(odd){ background:#262a2f; }
    .kv td:first-child{ color:#c4c8cc; }


    footer a{ color:#cfd6dc; }
    footer a:hover{ color:#ffffff; }

    main{max-width:1024px;margin:auto;padding:2rem 1rem}
    .muted{opacity:.8}
    .badge{display:inline-block;padding:.25rem .55rem;border-radius:.5rem;font-size:.9rem}
    .ok{background:#e6f4ea;color:#0a5c2c}
    .warn{background:#fff4e5;color:#8a5a00}
    .err{background:#fde8e8;color:#8a1010}
    .kv td:first-child{white-space:nowrap;width:26%}
    .kv td{vertical-align:top}
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
    pre{overflow:auto}
      #f {
      display: grid;
      grid-template-columns: minmax(520px, 1.4fr) auto;
      gap: 0.75rem;
    }
    @media (max-width: 640px) {
      #f { grid-template-columns: 1fr; } 
    }


    #f input[name="host"] { width: 100%; }


    #f button {
      font-size: 0.8rem;      
      padding: 0.35rem 0.75rem; 
      line-height: 1.1;
      min-width: auto; 
    }
    #loading {
      margin-top: 0.75rem;
      min-height: 2.25rem;         
      display: block;
    }
    [hidden] { display: none !important; } 
    .title-row { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }

    .pill {
      display:inline-flex; align-items:center; gap:.3rem;
      padding:.12rem .45rem; border-radius:999px; font-size:.72rem;
      border:1px solid rgba(0,0,0,.10);
      background:#f6f7f8; color:#333;
    }
  .pill      { background:#2d3136; color:#e6eaee; border-color:#3a4046; }
  .pill.ok   { background:#23382b; color:#bfe7cc; border-color:#2e4a39; }
  .pill.warn { background:#3a2e16; color:#ffdca6; border-color:#4a3a1f; }
  .pill.err  { background:#3a2121; color:#ffbcbc; border-color:#4a2a2a; }


  .result-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }


  .icon-btn{
    font-size:.72rem; line-height:1;
    padding:.18rem .5rem;
    background:#2d3136; color:#e6eaee; border:1px solid #3a4046;
    border-radius:999px; cursor:pointer;
  }
  .icon-btn:hover{ background:#333941; }


  #toast{
    position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(6px);
    background:#2d3136; color:#e6eaee; border:1px solid #3a4046;
    padding:.5rem .75rem; border-radius:.5rem;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
    z-index: 9999;
  }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .app-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
  .app-header h1{font-size:1.8rem;font-weight:600;margin:0}
  .logo{height:32px;width:auto;display:block}
  .logo-link{display:flex;align-items:center}

  .app-header h1{
  margin:0;
  font-size:1.8rem;
  font-weight:600;

  background: linear-gradient(90deg, #7f9eccff, #25dbf3ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;              
  -webkit-text-fill-color: transparent;
}
  .intro-card { margin-bottom: 0.75rem; background: #171b20; border: 1px solid #242a31; }
  .intro-card .lead { color:#cfd6dc; margin:.25rem 0 .5rem; }
  .intro-card header h3 { margin-bottom:.25rem; }

  .intro-card .lead { 
    font-size: 0.5rem;    
    line-height: 1.05;
    margin-bottom: .4rem;
  }

  .intro-card ul {
    font-size: 0.5rem;   
    line-height: 1.05;
    margin: .4rem 0 .2rem;
  }

  .intro-card ul li { 
    margin: .15rem 0;      
  }

  .intro-card details > summary {
    font-size: 0.5rem;     
    line-height: 1.05;
    margin: .35rem 0 .2rem;
    font-weight: 500;      
  }

  .intro-card details[open] > summary {
    margin-bottom: .25rem; 
  }

  .intro-card details p {
    font-size: 0.5rem;  
    line-height: 1.05;
    margin: 0; 
  }

  .intro-card details code { 
    font-size: 0.48rem;     
  }