[html]
<div class="gemini_topic">
  <div class="gemini_topic_title">
    <div class="gemini_topic_humanized">обычное название</div>
    <div class="gemini_topic_directive">G:\иишное</div>
  </div>

  <div class="gemini_topic_main">
    <!-- <div class="gemini_topic_minititle">маленький заголовок</div>

    <p>обычный абзац</p>

    <p class="rule">выделенный абзац 1</p>
    <p class="point">выделенный абзац 2</p>

    <div class="gemini_topic_block1">блок одного типа</div>
    <div class="gemini_topic_block2">блок второго типа</div> -->
    <div id="phu-role-selector">
      <!-- ==================== ВОЗРАСТ ==================== -->

      <div class="phu-step">
        <div class="phu-step-title">возраст</div>

        <input
          type="number"
          id="phu-age"
          min="16"
          max="100"
          placeholder="введите возраст"
        />
      </div>

      <!-- ==================== ОСНОВНАЯ РОЛЬ ==================== -->

      <div class="phu-step">
        <div class="phu-step-title">выбери роль в университете</div>

        <div class="phu-role-select" id="phu-role">
          <div class="phu-role-option" data-value="student">
            студент (от 16 лет)
          </div>

          <div class="phu-role-option" data-value="faculty">
            преподаватель (от 25 лет)
          </div>

          <div class="phu-role-option" data-value="university-management">
            управление университетом (от 30 лет)
          </div>

          <div class="phu-role-option" data-value="administrative-staff">
            административный персонал (от 23 лет)
          </div>

          <div class="phu-role-option" data-value="campus">
            персонал кампуса и инфраструктуры (от 18 лет)
          </div>
        </div>

        <div id="phu-role-error" class="phu-error"></div>
      </div>

      <!-- ==================== ДИНАМИЧЕСКАЯ ЧАСТЬ ==================== -->

      <div id="phu-dynamic"></div>

      <!-- ==================== ОБНОВЛЕНИЕ ==================== -->

      <div class="phu-actions">
        <button type="button" id="phu-refresh-roles">обновить роли</button>
        <button type="button" id="phu-save">подтвердить выбор</button>
        <button type="button" id="phu-reset" class="danger">
          сбросить роль
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Дополнительные стили */
  .phu-role-option.phu-role-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .phu-choice-taken {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
  }

  .phu-choice-taken-by {
    font-size: 0.85em;
    color: var(--accent-color-contrast);
    margin-top: 5px;
    font-weight: 600;
  }

  .phu-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }

  .phu-greek-choice-wrap {
    position: relative;
  }

  .phu-president-info {
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    background: var(--topic-block2-bg);
    display: none;
  }

  .phu-president-label {
    font-size: 0.85em;
    color: var(--accent-color-contrast);
    font-weight: 600;
  }

  .phu-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
  }

  .phu-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .phu-subject-choice-wrap {
    position: relative;
  }

  .phu-subject-teachers {
    font-size: 0.85em;
    color: var(--accent-color-contrast);
    margin-top: 5px;
    font-weight: 600;
  }

  .phu-departments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
  }

  @media (max-width: 700px) {
    .phu-departments-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .phu-error {
    color: #ff4444;
    font-size: 0.9em;
    margin-top: 8px;
    min-height: 20px;
  }
  /* Дополнительные стили */
  .phu-role-option.phu-role-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .phu-choice-taken {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
  }

  .phu-choice-taken-by {
    font-size: 0.85em;
    color: var(--accent-color-contrast);
    margin-top: 5px;
    font-weight: 600;
  }

  .phu-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }

  .phu-greek-president-wrap {
    padding: 15px;
    border-radius: 15px;
    background: var(--topic-block2-bg);
    outline: 1px solid var(--topic-block2-border);
  }

  .phu-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
  }

  .phu-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .phu-president-status {
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--accent-color-contrast);
    font-weight: 600;
  }

  .phu-departments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
  }

  @media (max-width: 700px) {
    .phu-departments-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .phu-error {
    color: #ff4444;
    font-size: 0.9em;
    margin-top: 8px;
    min-height: 20px;
  }

  #phu-role-selector {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  #phu-role-selector * {
    box-sizing: border-box;
  }

  .phu-step {
    margin-top: 20px;
  }

  .phu-step:first-child {
    margin-top: 0;
  }

  .phu-step-title,
  .phu-group-title {
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: lowercase;
  }

  /* основная роль */

  .phu-role-select {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .phu-role-option {
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid var(--topic-border);
    background: var(--topic-block1-bg);
    transition:
      opacity 0.15s ease,
      transform 0.15s ease;
  }

  .phu-role-option:hover {
    transform: translateY(-1px);
  }

  .phu-role-option.selected {
    outline: 2px solid var(--accent-color-contrast);
    outline-offset: 2px;
  }

  @media (max-width: 700px) {
    .phu-role-select {
      grid-template-columns: 1fr;
    }
  }

  /* =========================
     ОБЩИЕ КАРТОЧКИ
     ========================= */

  .phu-choice {
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 15px;
    border: 1px solid var(--topic-border);
    background: var(--topic-block1-bg);
    transition:
      opacity 0.15s ease,
      transform 0.15s ease;
  }

  .phu-choice:hover {
    transform: translateY(-1px);
  }

  .phu-choice.selected {
    outline: 2px solid var(--accent-color-contrast);
    outline-offset: 2px;
  }

  .phu-choice-title {
    font-weight: 600;
  }

  .phu-choice-description {
    margin-top: 5px;
    font-size: 0.9em;
    opacity: 0.75;
    line-height: 1.4;
  }

  #phu-age {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--topic-border);
    background: var(--topic-block1-bg);
    color: inherit;
    font: inherit;
  }

  /* =========================
     ФАКУЛЬТЕТЫ
     ========================= */

  .phu-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* =========================
     GREEK
     ========================= */

  .phu-greek-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .phu-greek-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .phu-greek-column > .phu-group-title {
    text-align: center;
  }

  /* =========================
     ПРЕДМЕТЫ
     ========================= */

  .phu-subject-groups {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .phu-subject-group {
    padding: 15px;
    border-radius: 18px;
    background: var(--topic-block2-bg);
    outline: 1px solid var(--topic-block2-border);
  }

  .phu-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .phu-subject-grid .phu-choice {
    padding: 11px 13px;
  }

  /* =========================
     STAFF
     ========================= */

  .phu-staff-groups {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .phu-staff-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .phu-staff-group > .phu-group-title {
    margin-bottom: 2px;
    grid-column: 1 / -1;
  }

  /* =========================
     РУКОВОДСТВО ФАКУЛЬТЕТОВ
     ========================= */

  .phu-management-faculties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .phu-management-faculty-wrap {
    display: contents;
  }

  .phu-management-faculty-roles {
    grid-column: 1 / -1;
  }

  .phu-management-role-wrap {
    margin-top: 20px;
    padding: 15px;
    border-radius: 18px;
    background: var(--topic-block2-bg);
    outline: 1px solid var(--topic-block2-border);
  }

  .phu-management-role-title {
    font-weight: 700;
    margin-bottom: 10px;
  }

  .phu-management-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* =========================
     КАФЕДРЫ
     ========================= */

  .phu-departments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .phu-department {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: var(--topic-block1-bg);
  }

  .phu-department-title {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.8;
    padding: 2px 4px;
  }

  .phu-department .phu-choice {
    background: transparent;
  }

  /* Блокировка интерфейса */
  .phu-locked .phu-choice:not(.selected) {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  .phu-locked .phu-choice.selected {
    opacity: 1;
    cursor: default;
    pointer-events: none;
  }

  .phu-locked .phu-role-option:not(.selected) {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* Ссылки внутри занятых ролей работают */
  .phu-choice-taken-by a {
    pointer-events: auto !important;
  }

  /* Описания */
  .phu-greek-description,
  .phu-faculty-description,
  .phu-management-description {
    font-size: 0.9em;
    opacity: 0.75;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--topic-block2-bg);
    outline: 1px solid var(--topic-block2-border);
  }
  /* =========================
     MOBILE
     ========================= */

  @media (max-width: 700px) {
    .phu-choice-grid,
    .phu-greek-grid,
    .phu-management-faculties,
    .phu-management-roles,
    .phu-staff-group {
      grid-template-columns: 1fr;
    }

    .phu-subject-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
</style>

<script src="https://forumstatic.ru/files/001a/e1/ae/12593.js"></script>

[/html] [hideprofile]