/* Character Browser Theme (warm orange) */
    html, body {
      background-color: #C85A2A;
      background-image: url('/public/background/image.png');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: #FFE8D0;
    }
    /* Character browser needs wiki-main to be a flex column so the inner grid fills height */
    .wiki-main { overflow: hidden; display: flex; flex-direction: column; }

    /* Layout */
    main { padding-top: 28px; display: block; }

    #filterPanel, #content {
      background: rgba(28, 8, 2, 0.50);
      padding: 16px 20px;
    }

    #filterPanel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-radius: 12px 12px 0 0;
      border-bottom: 1px solid rgba(255, 155, 70, 0.15);
    }
    #content {
      border-radius: 0 0 12px 12px;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    /* Desktop: sidebar on left */
    @media (min-width: 1100px) {
      html, body { overflow: hidden; }
      main {
        display: grid;
        grid-template-columns: 280px 1fr;
        align-items: start;
        gap: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
      }
      #filterPanel {
        border-radius: 12px 0 0 12px;
        border-right: 1px solid rgba(255, 155, 70, 0.15);
        border-bottom: none;
        position: sticky;
        top: 0;
        align-self: start;
        height: 85vh;
        overflow-y: auto;
      }
      #content {
        border-radius: 0 12px 12px 0;
        height: 85vh;
        overflow-y: auto;
        align-content: start;
        scrollbar-color: rgba(255, 155, 70, 0.45) transparent;
      }
      #content::-webkit-scrollbar-track { background: transparent; }
    }

    .sidebar-controls { display: flex; flex-direction: column; gap: 6px; }

    #search,
    .lang-select {
      background: #414558;
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 6px;
      color: #F0F0F0;
      font-size: 0.85rem;
      padding: 9px 12px;
      width: 100%;
      box-sizing: border-box;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #search::placeholder { color: rgba(220, 220, 220, 0.45); }
    #search:focus,
    .lang-select:focus { outline: none; border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10); }
    .lang-select option { background: #3a3a3a; color: #F0F0F0; }

    .card:focus-visible { outline-color: #FFB347; }
    .card:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 18px rgba(150, 40, 0, 0.55)); }

    .empty, .loading { color: rgba(255, 215, 175, 0.6); }

    /* Modal */
    .modal-overlay { background: rgba(28, 8, 0, 0.72); }
    .modal {
      background: rgba(42, 13, 3, 0.93);
      border-color: rgba(255, 155, 70, 0.22);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      color: #FFE8D0;
    }
    .modal-header h2 { color: #FFE8D0; }
    .modal-header .close-btn { color: rgba(255, 185, 130, 0.6); }
    .modal-header .close-btn:hover { color: #FFE8D0; }

    .detail-icon { background: rgba(0, 0, 0, 0.28); border-radius: 10px; }
    .detail-meta .row .label { color: rgba(255, 200, 150, 0.62); }
    .detail-meta .row .value { color: #FFE8D0; }

    .detail-section h3 { color: #FFD4A8; border-bottom-color: rgba(255, 155, 70, 0.28); }
    .detail-section p { color: rgba(255, 220, 185, 0.88); }

    .badge { background: rgba(255, 255, 255, 0.13); color: #FFD4A8; }
    .badge-rarity-SSR { background: rgba(190, 135, 5, 0.75); color: #FFE8A0; }
    .badge-rarity-SR  { background: rgba(105, 32, 180, 0.65); color: #D8B4FF; }
    .badge-rarity-R   { background: rgba(22, 85, 195, 0.65); color: #A8C8FF; }

    .status-ref {
      border-color: rgba(255, 155, 70, 0.45);
      background: rgba(255, 115, 25, 0.15);
      color: #FFB870;
    }
    .entity-ref--char   { border-color: rgba(255, 155, 70, 0.35); color: #FFB870; }
    .entity-ref--weapon { border-color: rgba(255, 190, 60, 0.35); color: #FFD080; }
    .entity-ref--item   { border-color: rgba(230, 175, 255, 0.35); color: #E8C8FF; }

    /* �E��E��E��E� Toolbar restructure �E��E��E��E� */
    .toolbar { flex-direction: column; gap: 10px; }
    .toolbar-main-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .toolbar-main-row input { flex: 1; min-width: 160px; }

    /* Filter toggle button */
    .filter-toggle-btn {
      padding: 8px 16px; border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      background: #414558; color: #F0F0F0;
      font-size: 0.85rem; cursor: pointer;
      white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    }
    .filter-toggle-btn:hover { border-color: rgba(255, 255, 255, 0.80); color: #fff; }
    .filter-toggle-btn--active { border-color: rgba(255, 255, 255, 0.80); background: rgba(90, 90, 90, 0.70); }
    .filter-badge {
      background: #FFB347; color: #3C0A00; font-size: 0.7rem; font-weight: 700;
      border-radius: 999px; padding: 0 5px; min-width: 16px; height: 16px;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* Filter panel */
    .filter-groups { display: flex; flex-direction: column; gap: 9px; }
    .filter-group { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
    .filter-group-label {
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.75); width: 108px; flex-shrink: 0; padding-top: 5px;
      font-weight: 600;
    }
    /* Collapsible filter groups */
    details.filter-group-collapsible { display: block; }
    details.filter-group-collapsible > summary {
      display: flex; align-items: center; justify-content: space-between;
      list-style: none; cursor: pointer; user-select: none;
      font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.75); font-weight: 600;
      padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    details.filter-group-collapsible > summary::-webkit-details-marker { display: none; }
    details.filter-group-collapsible > summary::after {
      content: '\25B6'; font-size: 0.55em; opacity: 0.55;
      transition: transform 0.15s; flex-shrink: 0; margin-left: 4px;
    }
    details.filter-group-collapsible[open] > summary::after { transform: rotate(90deg); }
    details.filter-group-collapsible .filter-chips { margin-top: 7px; }
    .filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .filter-chip {
      padding: 3px 11px; border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: #414558; color: rgba(220, 220, 220, 0.80);
      font-size: 0.78rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: 5px;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .filter-chip img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
    .filter-chip:hover { border-color: rgba(255, 255, 255, 0.70); color: #fff; }
    .filter-chip--active {
      background: rgba(100, 100, 100, 0.65); border-color: rgba(255, 255, 255, 0.85);
      color: #fff; font-weight: 500;
    }
    /* Rarity chip active tints */
    @keyframes rainbow-hue { to { filter: hue-rotate(360deg); } }
    .chip-ssr.filter-chip--active {
      border: 1px solid transparent;
      background-image:
        linear-gradient(rgba(40, 30, 20, 0.45), rgba(40, 30, 20, 0.45)),
        linear-gradient(90deg, #f07898, #f0b060, #ece855, #60d898, #70c8f0, #c878f0, #f07898);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      color: #fff;
      animation: rainbow-hue 2.4s linear infinite;
    }
    .chip-sr.filter-chip--active  { background: rgba(180,130,10,0.30); border-color: #FFD700; color: #FFE87A; }
    .chip-r.filter-chip--active   { background: rgba(120,130,148,0.30); border-color: #C8D0DC; color: #E4E8F0; }
    .chip-n.filter-chip--active   { background: rgba(130,75,25,0.30); border-color: #CD7F32; color: #E8A860; }
    /* Element chip active tints */
    .chip-el-fire.filter-chip--active    { background: rgba(220,70,30,0.25);   border-color: #FF6B3D; color: #FFC4A8; }
    .chip-el-water.filter-chip--active   { background: rgba(30,100,220,0.4);   border-color: #2e83eb; color: #A8CCFF; }
    .chip-el-earth.filter-chip--active   { background: rgba(97,70,30,0.25);    border-color: #c28d51; color: #d19958; }
    .chip-el-wind.filter-chip--active    { background: rgba(80,195,160,0.25);  border-color: #52CBA8; color: #A8EFD8; }
    .chip-el-light.filter-chip--active   { background: rgba(230,200,50,0.25);  border-color: #FFD940; color: #FFF8A0; }
    .chip-el-dark.filter-chip--active    { background: rgba(110,40,180,0.25);  border-color: #A066FF; color: #D8B8FF; }
    .chip-el-neutral.filter-chip--active { background: rgba(130,130,130,0.25); border-color: #AAAAAA; color: #E8E8E8; }
    /* Pure icon chips: no border, no background, opacity toggle */
    .filter-chip--icon {
      padding: 2px; border-color: transparent !important; background: transparent !important;
      background-image: none !important; animation: none !important; opacity: 0.4;
      transition: opacity 0.12s, filter 0.12s;
    }
    .filter-chip--icon img { width: 22px; height: 22px; }
    .filter-chip--icon:hover { border-color: transparent !important; background: transparent !important; opacity: 0.7; }
    .filter-chip--icon.filter-chip--active {
      border-color: transparent !important; background: transparent !important;
      background-image: none !important; animation: none !important;
      opacity: 1; filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
    }

    .multi-selected-chips .filter-chip { max-width: 160px; display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: clip; }
    .multi-selected-chips .filter-chip .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
    .multi-selected-chips .filter-chip .chip-x { flex-shrink: 0; opacity: 0.7; margin-left: 3px; font-size: 0.9em; }
    .filter-select { width: 100% !important; max-width: 100%; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

    /* Date filter */
    .date-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .date-input {
      padding: 4px 8px; font-size: 0.78rem;
      background: #414558; border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 6px; color: #F0F0F0; width: 118px; outline: none;
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .date-input:focus { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10); }
    .date-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
    .date-sep { color: rgba(255, 255, 255, 0.40); font-size: 0.78rem; }
    .multi-select-wrap { display: flex; flex-direction: column; gap: 5px; }
    .multi-selected-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .clear-filters-btn {
      align-self: flex-start; padding: 5px 16px; border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35); background: #414558;
      color: rgba(220, 220, 220, 0.85); font-size: 0.78rem; cursor: pointer;
    }
    .clear-filters-btn:hover { border-color: rgba(255, 255, 255, 0.75); color: #fff; }

    html { overflow-y: auto; }

    /* �E��E��E��E� Scrollbar �E��E��E��E� */
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 155, 70, 0.45) rgba(28, 8, 2, 0.35);
    }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
    ::-webkit-scrollbar-track {
      background: rgba(28, 8, 2, 0.35);
      border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 140, 50, 0.45);
      border-radius: 8px;
      border: 1px solid rgba(255, 100, 20, 0.2);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 155, 70, 0.75);
    }
    ::-webkit-scrollbar-corner { background: transparent; }