/* I know you hate this, cry about it bitch. */
    body { font-family: sans-serif; padding: 2em; max-width: 800px; margin: auto; }
    label, input, select { display: block; margin: 0.5em 0; }
    button { margin: 0.5em 0; }
    nav { margin-bottom: 2em; }
    a { margin-right: 1em; text-decoration: none; color: #333; }
    .form-group { margin: 1em 0; display: flex; align-items: center; flex-direction: column; }
    .expiry-buttons button {
      display: inline-block; margin-right: 0.5em; padding: 0.4em 0.8em; font-size: 0.9em;
      background: #eee; border: 1px solid #ccc; cursor: pointer;
    }
    .ttl-btn { display: inline-block; margin-right: 0.5em; padding: 0.4em 0.8em; font-size: 0.9em;
      background: #eee; border: 1px solid #ccc; cursor: pointer; }
    .ttl-btn.selected { background: #333; color: #fff; border-color: #333; }
    #log { background: #b4b4b4; padding: 1em; border: 1px solid #ccc; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; font-size: 0.9em; border-radius: 6px; font-style: italic; }
    #log a { color: #66f; text-decoration: underline; }
    #log a:hover { color: #fff; }
    /* Drop zone + layout rules to prevent overlap */
    h2, h1, h5 { margin-top: 0; margin-bottom: 0.5em; display: block; }
    #drop-zone {
      border: 2px dashed #ccc; padding: 2em; text-align: center; margin-bottom: 1.25em;
      border-radius: 8px; transition: border-color 0.2s ease; min-height: 3.5em; box-sizing: border-box;
      display: block; width: fit-content; width: 100%;
    }
    #upload-form { display: flex; flex-direction: column; align-items: center; text-align: center; }
    #upload-form .form-group { margin: 0px; }
    .smalltag { display: inline; color: #6c6c6c; font-style: italic; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; padding: 0; margin: 0; font-size: small; }
    .smalltag:hover {
      cursor: help;
      text-decoration: underline dotted;
    }
    #file { display: none; }
    h2, h1, h5 { text-align: center; }
    /* hide JS-only by default; show when body has .js-enabled */
    .js-only { display: none; }
    .js-enabled .js-only { display: initial; }
    /* no-JS fallbacks are hidden by default; visible only when <noscript> forces them */
    .nojs-only { display: none; }
    .log-status.ok { color: #00ff88; }
    .log-status.error { color: #ff4444; }
    .log-status.warn { color: #ffaa00; }
    .file-btn {
        display: inline-block;
        padding: 0.4em 0.8em;
        background:#5a5a5a; border:1px solid #ccc; cursor:pointer;
      }
    h5 {
      color: gray;
      font-style: italic;
    }
    .file-btn:hover { background:#333232; }

    @media (prefers-color-scheme: dark) {
      body { background-color: #111; color: #eee; }
      nav a { color: #ccc; }
      a:hover { color: #fff; }
      pre { color: #ddd; }
      #log {
        background: #222; border-color: #444; color: #ddd;
      }
    }
    @media screen and (max-width: 600px) {
      #drop-zone {
        display: none;
      }
    }