html, body {
      background-color: #100A04;
      background-image: linear-gradient(rgba(10,5,1,0.52), rgba(10,5,1,0.52)), url('/public/background/illustrator.png');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: #F0E0C8;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    * { scrollbar-width: thin; scrollbar-color: rgba(200,140,60,0.45) rgba(28,14,4,0.5); }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: rgba(28,14,4,0.5); border-radius: 8px; }
    ::-webkit-scrollbar-thumb { background: rgba(200,130,50,0.5); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(220,160,80,0.75); }

    main {
      padding: 28px 24px 48px;
      max-width: 1100px;
      margin: 0 auto;
      background: rgba(12, 6, 1, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 12px;
      margin-top: 16px;
      margin-bottom: 16px;
      border: 1px solid rgba(200, 140, 60, 0.18);
    }

    .il-page-title {
      font-size: 1.55rem;
      font-weight: 700;
      color: #FFFFFF;
      letter-spacing: .02em;
      margin-bottom: 28px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(200, 140, 60, 0.28);
      text-shadow: 0 0 20px rgba(210, 150, 60, 0.5);
    }

    /* Directory */
    .il-directory {
      margin-bottom: 28px;
    }
    .il-dir-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(200,150,70,0.55);
      margin-bottom: 8px;
    }
    .il-dir-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 6px;
    }
    .il-dir-link {
      color: rgba(230,185,110,0.85);
      text-decoration: none;
      font-size: 0.82rem;
      padding: 3px 9px;
      border-radius: 999px;
      white-space: nowrap;
      background: rgba(120,70,15,0.22);
      border: 1px solid rgba(170,100,25,0.22);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .il-dir-link:hover {
      background: rgba(180,110,30,0.40);
      border-color: rgba(200,130,40,0.50);
      color: #F5DFA0;
    }

    /* Search */
    .il-search-wrap {
      margin-bottom: 20px;
    }
    .il-search {
      width: 100%;
      max-width: 360px;
      padding: 7px 12px;
      background: rgba(20,10,2,0.7);
      border: 1px solid rgba(200,140,60,0.25);
      border-radius: 7px;
      color: #F0E0C8;
      font-size: .88rem;
      outline: none;
      transition: border-color 0.15s;
    }
    .il-search:focus { border-color: rgba(210,160,70,0.6); }
    .il-search::placeholder { color: rgba(200,160,100,0.4); }

    /* Table wrapper */
    .il-table-wrap {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(180,120,40,0.22);
      background: rgba(8,4,1,0.82);
    }

    .il-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .84rem;
    }

    .il-table thead tr {
      background: rgba(160,100,30,0.14);
    }

    .il-table th {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: rgba(220,170,90,0.75);
      font-weight: 700;
      padding: 9px 12px;
      text-align: left;
      border-bottom: 1px solid rgba(180,120,40,0.2);
    }

    .il-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(140,90,30,0.12);
      vertical-align: top;
    }

    .il-table tbody tr:nth-child(even) td {
      background: rgba(120,70,10,0.10);
    }

    .il-table tbody tr:last-child td {
      border-bottom: none;
    }

    .il-table tbody tr:hover td {
      background: rgba(160,100,30,0.18);
    }

    /* Name cell */
    .il-name-cell {
      font-weight: 600;
      color: #F0E0C8;
      white-space: nowrap;
      min-width: 120px;
    }
    /* Romanized inline span — only visible on mobile */
    .il-name-roman {
      display: none;
    }

    /* Romanized column cell */
    .il-roman-cell {
      color: rgba(220,190,140,0.72);
      white-space: nowrap;
      min-width: 120px;
    }

    /* Links cell */
    .il-links-cell {
      white-space: nowrap;
    }

    .il-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(180,120,40,0.12);
      border: 1px solid rgba(180,120,40,0.2);
      color: rgba(220,170,90,0.75);
      text-decoration: none;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      margin-right: 4px;
    }
    .il-link:last-child { margin-right: 0; }
    .il-link:hover {
      background: rgba(200,140,50,0.22);
      color: #F0C060;
      border-color: rgba(210,160,60,0.45);
    }
    .il-link svg { display: block; }

    /* Characters cell */
    .il-chars-cell {
      min-width: 200px;
    }

    .il-char-row {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: rgba(220,190,140,0.85);
      padding: 2px 0;
      border-radius: 5px;
      transition: color 0.13s;
    }
    .il-char-row:hover { color: #F0C060; }

    .il-char-icon {
      width: 36px;
      height: 36px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 4px;
    }

    .il-char-name {
      font-size: .82rem;
      line-height: 1.3;
    }

    .il-empty {
      color: rgba(200,160,100,0.35);
      font-style: italic;
      font-size: .8rem;
    }

    .il-loading, .il-error {
      text-align: center;
      padding: 40px;
      color: rgba(200,160,100,0.5);
      font-size: .92rem;
    }
    .il-error { color: rgba(220,100,80,0.8); }

    /* ── Mobile: stacked layout ──────────────────────────────────────────── */
    @media (max-width: 620px) {
      .il-table thead { display: none; }
      .il-table, .il-table tbody { display: block; }
      .il-table tr {
        display: block;
        border-bottom: 1px solid rgba(140,90,30,0.2);
        padding: 8px 0;
      }
      .il-table tbody tr:last-child { border-bottom: none; }
      .il-table tbody tr:hover td { background: none; }
      .il-table td {
        display: block;
        border-bottom: none;
        padding: 3px 10px;
      }
      .il-roman-cell { display: none; }
      .il-name-roman { display: inline; }
      .il-chars-cell {
        padding-top: 6px;
        border-top: 1px solid rgba(140,90,30,0.12);
        margin-top: 4px;
      }
    }
  

    .il-top-btn {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 200;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(200,120,30,0.35);
      background: rgba(28,10,2,0.82);
      color: rgba(255,175,80,0.85);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, background 0.15s, color 0.15s;
      backdrop-filter: blur(4px);
    }
    .il-top-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }
    .il-top-btn:hover {
      background: rgba(180,90,15,0.55);
      color: #FFD080;
      border-color: rgba(220,140,40,0.65);
    }