:root {
      --radius: 14px;
  }

  html,
  body {
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: #f7f9fc;
      /* light page background */
      color: #0b0c0e;
      /* dark text */
  }

  header {
      padding: 24px 16px 8px;
  }

  h1 {
      margin: 0 0 8px 0;
      font-size: 1.25rem;
  }

  p.sub {
      margin: 1rem;
      ;
      opacity: .8;
      font-size: .95rem;
      color: #334155;
  }

  .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 12px 16px 0;
  }

  .search {
      flex: 1;
  }

  .search input {
      width: 100%;
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid #cbd5e1;
      /* slate-300 */
      background: #ffffff;
      color: #0b0c0e;
      outline: none;
  }

  .search input::placeholder {
      color: #64748b;
  }

  .search input:focus {
      border-color: #60a5fa;
      box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
  }

  .styled-select {
      padding: 0.6em 1em;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #fff;
      font-size: 1rem;
      font-family: Arial, sans-serif;
      color: #333;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: border-color 0.2s, box-shadow 0.2s;
  }

  .styled-select:hover {
      border-color: #666;
  }

  .styled-select:focus {
      outline: none;
      border-color: #0077cc;
      box-shadow: 0 0 5px rgba(0, 119, 204, 0.5);
  }

  .styled-select option {
      padding: 0.5em;
      font-size: 0.95rem;
      background-color: #fff;
      color: #333;
  }

  .styled-select option:hover {
      background-color: #f0f0f0;
  }

  .styled-select option.lahko {
    font-size: 1rem;
  }

  .wrap {
      padding: 12px 8px 24px;
  }

  .table {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius);
      border: 1px solid #e5e7eb;
      background: #ffffff;
  }

  table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px;
  }

  /* Default alignment: center */
  th,
  td {
      text-align: center;
      padding: 10px 12px;
      border-bottom: 1px solid #eef2f7;
      vertical-align: top;
  }

  thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      cursor: pointer;
      user-select: none;
      background: #f0f4f8;
      border-bottom-color: #e2e8f0;
  }

  /* Zebra striping */
  tbody tr:nth-child(odd) {
      background: #ffffff;
  }

  tbody tr:nth-child(even) {
      background: #f9fafb;
  }

  tbody tr:hover {
      background: #f1f5f9;
  }

  /* slightly stronger on hover */

  /* Right-align numeric columns (both headers and data cells) */
  td,
  th {
      text-align: center;
  }

  /* Right-align only td values in 5th, 6th, and 7th columns */
  .table table td:nth-child(5),
  .table table td:nth-child(6),
  .table table td:nth-child(7) {
      text-align: right;
  }

  caption {
      caption-side: top;
      /* default, but you can also use bottom */
      font-weight: bold;
      font-size: 1.1em;
      text-align: center;
      text-wrap: balance;
      /* balances line breaks for better readability */
      padding: 0.5em;
      color: #333
  }

  .sortable::after {
      content: " ↕";
      opacity: .5;
      font-size: .9em;
      color: #6b7280;
  }

  th[aria-sort="ascending"]::after {
      content: " ↑";
      font-weight: bold;
      color: #2563eb;
  }

  th[aria-sort="descending"]::after {
      content: " ↓";
      color: #2563eb;
      font-weight: bold;
  }

  @media (max-width: 520px) {
      header {
          padding: 20px 12px 6px;
      }

      .controls {
          padding: 8px 12px 0;
      }

      .wrap {
          padding: 10px 6px 18px;
      }

      th,
      td {
          padding: 8px 10px;
          font-size: 0.95rem;
      }

      table {
          min-width: 800px;
      }
  }

  footer {
      padding: 16px;
      opacity: .8;
      font-size: .9rem;
      color: #475569;
  }

  .count {
      font-variant-numeric: tabular-nums;
  }

  /* --- Row numbering before the 'suomeksi' cell (pure CSS) --- */
  tbody {
      counter-reset: rownum;
  }

  tbody tr {
      counter-increment: rownum;
  }

  tbody td:nth-child(2) {
      font-style: italic;
  }

  td[data-col="suomeksi"] {
      position: relative;
  }

  td[data-col="suomeksi"]::before {
      content: counter(rownum) ". ";
      font-variant-numeric: tabular-nums;
      opacity: 0.7;
      margin-right: 6px;
      color: #475569;
  }