[hideprofile][html]
<!-- Character Browser HTML Snippet -->
<div class="character-browser">
    <style>
.character-browser{
  width:100%;
  margin:0 auto;
  padding:0 20px 20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  background:var(--role-list-browser-bg);
  box-shadow:var(--role-list-browser-shadow);
}

/* ===== Sticky letter nav ===== */
.letter-nav{
  position:sticky;
  top:0;
  z-index:2;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;

  margin:0 -20px 20px;
  padding:10px 20px;

  overflow-x:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;

  background:var(--role-list-letter-nav-bg);
  border-top:1px solid var(--role-list-letter-nav-border);
  border-bottom:1px solid var(--role-list-letter-nav-border);
}
.letter-nav::-webkit-scrollbar{display:none}

.letter-nav button{
  width:36px;height:36px;min-width:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;

  border:1px solid var(--role-list-letter-btn-border);
  border-radius:4px;
  background:var(--role-list-letter-btn-bg);

  font-size:14px;
  font-weight:500;
  color: var(--role-list-letter-btn-text-color);

  cursor:pointer;
  transition:.2s;
  box-shadow:var(--role-list-letter-btn-shadow);
}
.letter-nav button.active{
  background:var(--role-list-letter-btn-active-bg);
  color:var(--role-list-letter-btn-active-text);
}
.letter-nav button:disabled{
  opacity:.5;
  cursor:not-allowed;
  background:var(--role-list-letter-btn-disabled-bg);
}

/* ===== Controls ===== */
.controls{
  position:sticky;
  top:94px;
  z-index:2;

  display:flex;
  align-items:center;
  gap:15px;

  margin-bottom:20px;
  padding:15px;
  border-radius:6px;

  background:var(--role-list-controls-bg);
  box-shadow:var(--role-list-controls-shadow);
  flex-shrink:0;
}

/* ===== Segmented filter ===== */
.filter-buttons{
  display:flex;
  width:100%;
  max-width:300px;
  height:40px;

  position:relative;
  overflow:hidden;

  background:var(--role-list-filter-bg);
  border:1px solid var(--role-list-filter-border);
  border-radius:8px;
  box-shadow:var(--role-list-filter-inset-shadow);

  margin-right:15px;
  flex-shrink:0;
}
.filter-btn{
  flex:1;
  min-width:0;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  margin:0;
  padding:0;
  background:transparent;

  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--role-list-filter-btn-text);
  white-space:nowrap;

  position:relative;
  z-index:1;
  transition:color .2s;
}
.filter-btn.active{color:var(--role-list-filter-btn-active-text)}

.filter-buttons::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:33.33%;
  background:var(--role-list-filter-indicator-bg);
  border-radius:6px;
  transition:transform .3s cubic-bezier(.25,.8,.5,1);
  z-index:0;
}
.filter-buttons[data-active="all"]::after{transform:translateX(0)}
.filter-buttons[data-active="taken"]::after{transform:translateX(100%)}
.filter-buttons[data-active="needed"]::after{transform:translateX(200%)}

/* ===== Search ===== */
.search-box{
  width:100%;
  min-width:200px;
  margin:0 10px;
  padding:12px 20px 12px 45px;

  border:2px solid var(--role-list-search-border);
  border-radius:25px;

  font-size:15px;
  font-weight:500;
  color:var(--role-list-search-text);

  outline:0;
  box-sizing:border-box;
  transition:.2s;

  background:var(--role-list-search-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B4E49' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 18px center;
  box-shadow:var(--role-list-search-shadow);
}
.search-box:focus{
  border-color:var(--role-list-search-focus-border);
  box-shadow:0 0 0 4px var(--role-list-search-focus-ring);
  transform:translateY(-1px);
}
.search-box::placeholder{
  color:var(--role-list-search-placeholder-text);
  font-weight:400;
}

/* Optional select (kept because it existed in original CSS) */
.filter-select{
  flex:1;
  min-width:150px;
  padding:8px;
  border:1px solid var(--role-list-select-border);
  border-radius:4px;
  background:var(--role-list-select-bg);
  font-size:14px;
}

/* ===== Grid of fandom columns ===== */
/* ===== Character list container (was inline) ===== */
#characterList{
  background-color: var(--role-list-character-list-bg);
  padding: 20px;
  border-radius: var(--role-list-character-list-radius);
  min-height: 200px;
  position: relative;
}

/* ===== Loading overlay (was inline) ===== */
#loadingIndicator{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  position:absolute;
  inset:0;

  background: var(--role-list-loading-overlay-bg);
  z-index:10;
  border-radius: var(--role-list-character-list-radius);
}

.role-list-spinner{
  width:40px;
  height:40px;
  border:4px solid var(--role-list-loading-spinner-track);
  border-top:4px solid var(--role-list-loading-spinner-accent);
  border-radius:50%;
  animation: spin 1s linear infinite;
  margin-bottom:15px;
}

.role-list-loading-text{
  font-size:16px;
  color: var(--role-list-loading-text);
  font-weight:500;
}

.role-list-error-message{
  color: var(--role-list-loading-error-text);
  margin-top:10px;
  display:none;
  max-width:80%;
  text-align:center;
}

.fandoms-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:400px;
  gap:15px;

  padding:15px;
  margin:0;

  flex:1;
  overflow-y:auto;

  height:calc(100vh - 150px);
}

.fandom-section{
  background:var(--role-list-fandom-card-bg);
  border-radius:8px;
  box-shadow:var(--role-list-fandom-card-shadow);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  height:100%;
}

.character-browser .fandom-header,
#pun-main .character-browser h2,
.character-browser .punbb .multipage .topic h2.fandom-header {
  background:var(--role-list-fandom-header-bg);
  padding:12px 15px !important;
  margin:0;
  position: relative !important;
  left: 0 !important;
  height: auto;
  line-height: 1em;

  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:14px !important;
  font-weight:600 !important;
  color:var(--role-list-fandom-header-text);

  border-bottom:1px solid var(--role-list-fandom-header-border);

  position:sticky;
  top:0;
  z-index:1;
  flex-shrink:0;
}

.fandom-characters{
  padding:0 15px 15px;
  flex:1;
  min-height:0;
  max-height:calc(100% - 50px);
  overflow-y:auto;

  scrollbar-width:thin;
  scrollbar-color:var(--role-list-scrollbar-thumb) var(--role-list-scrollbar-track);
}
.fandom-characters::-webkit-scrollbar{width:6px}
.fandom-characters::-webkit-scrollbar-track{
  background:var(--role-list-scrollbar-track);
  border-radius:3px;
}
.fandom-characters::-webkit-scrollbar-thumb{
  background:var(--role-list-scrollbar-thumb);
  border-radius:3px;
}

.character-row{padding:8px 0;margin:0}
.characters-list{width:100%}

.needed-row{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--role-list-character-row-divider);
}
.character-row-header{
  margin:10px 0 5px;
  width:100%;
  font-size:14px;
  font-weight:600;
  color:var(--role-list-character-row-header-text);
}

/* ===== Cards ===== */
.character-card{
  display:flex;
  flex-direction:row-reverse;
  padding:8px 12px;
  margin:4px 0;
  border-radius:4px;
  cursor:pointer;
  transition:.2s;
  position:relative;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.character-card:hover{
  background:var(--role-list-character-card-hover-bg);
  transform:translateY(-1px);
  box-shadow:var(--role-list-character-card-hover-shadow);
}
.character-card a{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;

  color:var(--role-list-character-link-text);
  text-decoration:none;

  font-size:15px;
  font-weight:500;
  text-transform:lowercase;

  white-space:nowrap;
}

.taken-badge{
  background:var(--role-list-taken-badge-bg);
  color:var(--role-list-taken-badge-text);
  padding:2px 8px;
  border-radius:8px;
  font-size:11px;
  margin-left:6px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.char-count{
  font-size:14px;
  color:var(--role-list-count-text);
  margin-left:8px;
  font-weight:400;
}

.no-results{
  grid-column:1 / -1;
  text-align:center;
  padding:30px;
  color:var(--role-list-empty-text);
  font-style:italic;
}
.hidden{display:none}

    </style>
    <div class="letter-nav" id="letterNav">
        <!-- Will be populated by JavaScript -->
    </div>
    <div class="controls">
        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; width: 100%;">
            <div class="filter-buttons">
                <button id="filterAll" class="filter-btn active">Все</button>
                <button id="filterTaken" class="filter-btn">Занятые</button>
                <button id="filterNeeded" class="filter-btn">Нужные</button>
            </div>
            <div style="flex: 1; min-width: 200px; position: relative;">
                <input type="text" id="searchInput" class="search-box" placeholder="Поиск по имени персонажа или фандому..."
                    style="width: 100%;">
            </div>
        </div>
    </div>

    <div id="characterList" class="fandoms-container">
        <div id="loadingIndicator">
            <div class="role-list-spinner" aria-hidden="true"></div>
            <div class="role-list-loading-text">Загрузка данных...</div>
            <div id="errorMessage" class="role-list-error-message"></div>
        </div>
    </div>

    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <!-- Quick nav removed for better space efficiency -->
</div>
[/html]