:root {
      --container-w: 680px;
  }

  body {
      font-family: sans-serif;
      padding: 1.25rem;
      margin: 0;
      color: #111;
      line-height: 1.5;
  }

  .container {
      max-width: var(--container-w);
      margin: 0 auto;
  }

  h1 {
      margin: 0 0 .35rem;
  }

  h2 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.5rem;
      margin-top: 0.25rem;
  }

  h3 {
      margin-top: 1.25rem;
  }

  /* Trust badge */
  .trust {
      display: grid;
      grid-template-columns: 10px auto 1fr;
      grid-auto-rows: auto;
      column-gap: 0.5rem;
      row-gap: 0.25rem;

      background: #f0f7ff;
      border: 1px solid #cfe3ff;
      color: #053a7a;
      padding: 0.65rem 0.75rem;
      border-radius: 10px;
      margin: 0.75rem 0 0;
      font-size: 0.95rem;
      line-height: 1.4;
      hyphens: none;
  }

  .trust .dot {
      grid-column: 1;
      grid-row: 1 / span 2;
      /* dot spans both rows */
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #2ecc71;
      align-self: start;
      margin-top: 0.2rem;
  }

  /* Column 2 = label; Column 3 = value + subline */
  .trust .label {
      grid-column: 2;
      grid-row: 1;
  }

  .trust .value {
      grid-column: 3;
      grid-row: 1;
  }

  .trust .sub {
      grid-column: 3;
      grid-row: 2;
      color: #05428c;
      font-style: italic;
  }

  .nowrap {
      white-space: nowrap;
  }

  /* Dropzone + picker row */
  .picker {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      margin-top: 1rem;
  }

  @media (min-width: 640px) {
      .picker {
          grid-template-columns: 1fr auto;
          align-items: center;
      }
  }

  .dropzone {
      border: 2px dashed #b7c4d6;
      border-radius: 10px;
      padding: 1rem;
      background: #f7fbff;
      color: #3b4a5a;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  }

  .dropzone strong {
      color: #1f7ae0;
  }

  .dropzone small {
      color: #566578;
      display: block;
      margin-top: .25rem;
  }

  .dropzone:focus-visible {
      outline: 2px solid #1f7ae0;
  }

  .dropzone.dragover {
      background: #eaf4ff;
      border-color: #1f7ae0;
      box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.15) inset;
  }

  input[type="file"] {
      display: inline-block;
  }

  .file-meta {
      font-size: 0.9rem;
      color: #555;
      min-height: 1.25rem;
      margin-top: .5rem;
  }

  .results {
      margin-top: 0.75rem;
      background: #f7f7f7;
      padding: 1rem;
      border: 1px solid #ddd;
      border-radius: 10px;
      max-height: 40vh;
      overflow: auto;
      white-space: normal;
      font-size: 0.95rem;
  }

  .results table {
      width: 100%;
      border-collapse: collapse;
  }

  .results th,
  .results td {
      padding: 0.4rem 0.3rem;
      border-bottom: 1px solid #e9e9e9;
      text-align: left;
  }

  .results td.size {
      white-space: nowrap;
  }

  .muted {
      color: #666;
  }

  /* Rounded sticky action bar */
  .action-bar {
      position: sticky;
      bottom: 0;
      background: #f7f7f7;
      border: 1px solid #ddd;
      border-radius: 10px 10px 0 0;
      margin-top: 1rem;
      padding: 0;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }

  .action-inner {
      max-width: var(--container-w);
      margin: 0 auto;
      display: flex;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
  }

  .action-left {
      font-size: 0.9rem;
      color: #444;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1 1 auto;
      padding-right: 0.5rem;
  }

  .buttons {
      display: flex;
      gap: 0.5rem;
      flex: 0 0 auto;
  }

  button {
      margin: 0;
      padding: 0.6rem 0.9rem;
      border-radius: 8px;
      border: 1px solid #ccc;
      background: #f8f8f8;
      cursor: pointer;
  }

  button.primary {
      background: #1f7ae0;
      border-color: #1f7ae0;
      color: #fff;
  }

  button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  .hint {
      font-size: 0.85rem;
      color: #666;
      margin-top: 0.5rem;
  }

  .progress {
      font-size: 0.85rem;
      color: #666;
  }

  details pre {
      white-space: pre-wrap;
      background: #fff;
      border: 1px solid #eee;
      padding: 0.6rem;
      border-radius: 6px;
  }

  /* Content sections */
  .content {
      margin: 2rem auto 4rem;
  }

  .lead {
      font-size: 1.05rem;
      color: #333;
  }

  .checklist {
      margin: .25rem 0 .75rem 0;
      padding-left: 1.25rem;
  }

  .note {
      background: #fffdf0;
      border: 1px solid #f0e2a0;
      padding: .75rem .9rem;
      border-radius: 8px;
      color: #5a4b00;
  }

  .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      background: #f2f2f2;
      padding: .1rem .35rem;
      border-radius: 4px;
      border: 1px solid #ddd;
  }

  /* FAQ */
  .faq details {
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: .6rem .8rem;
      background: #fafafa;
  }

  .faq details+details {
      margin-top: .6rem;
  }

  .faq summary {
      cursor: pointer;
      font-weight: 600;
  }

  .site-footer {
      border-top: 1px solid #e5e7eb;
      background: #fafafa;
      padding: 1.25rem 0;
      margin-top: 3rem;
      font-size: 0.9rem;
      color: #555;
  }

  .footer-inner {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 1rem;
      text-align: center;
  }

  .footer-links {
      margin-bottom: 0.25rem;
  }

  .footer-links a {
      color: #1f7ae0;
      text-decoration: none;
  }

  .footer-links a:hover {
      text-decoration: underline;
  }

  .footer-copy a {
      color: #1f7ae0;
      text-decoration: none;
  }

  .footer-copy a:hover {
      text-decoration: underline;
  }

  .footer-links span {
      color: #aaa;
      margin: 0 0.35rem;
  }