body {
    background-color: #ffffff;
}

p {
    text-align: center;
}

button {
    background-color: #d9f99d;
    /* Tokyo Night 深色背景 */
    color: #0c0c0b;
    margin: 5px 4px;
    margin-top: 2px;
    margin-bottom: 0px;
    padding: 0 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 极其细微的边框提升质感 */
    float: right;
}

input {
    background-color: #d9f99d;
    text-align: center;
    color: #0c0c0b;
    margin: 5px 0px;
    margin-top: 2px;
    margin-bottom: 0px;
    padding: 0 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 20px;
}

select {
    text-align: center;
    background-color: #c9f1df;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.input-file {
    display: none;
}

.file-label {
    background-color: #c8b8f4ff;
    text-align: center;
    padding: 2px 1px 2px 2px;
    color: #ffffff;
    margin-right: 3px;
    border-radius: 10px;
}

ul {
    gap: 8px;           /* 设置列表项之间的间距 */
    list-style: none;    /* 去除默认列表圆点 */
    padding: 9px 9px 9px 9px;          /* 清除默认内边距 */
    margin: 0;           /* 清除默认外边距 */
}


.section1 {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.roster {
    background-color: #f1ffca;
    padding: 5px 2px 2px 5px;
}

#ul\.roster {
    max-height: 410px;
    overflow: auto;
    column-width: 60px;
    column-gap: 15px;
}


#ul\.roster li {
  break-inside: avoid; 
  text-align: center;
  margin-bottom: 5px;
  border-radius: 15px;
  border: 1px solid rgb(255, 255, 255);
  color: white;
}

.boy {
    background-color: dodgerblue;
}

.girl {
    background-color: lightpink;
}


.ruleset {
    background-color: #fff1d5;
    display: block;
}

.ruleset-ul {
  margin-bottom: 5px;
  border-radius: 15px;
  border: 1px solid rgb(255, 255, 255);
  background-color: #b4def1;
  max-height: 410px;
  overflow: auto;
}

.ruleset-ul li {
  margin-bottom: 5px;
  border-radius: 15px;
  border: 1px solid rgb(255, 255, 255);
  background-color: #87a8ff;
  padding: 2px 7px 2px 7px;
  display: grid;
  grid-template-columns: 1fr 1fr 4fr 1fr;
}

.ruleset-ul li.ruleset-extra.ruleset-extra-range {
    display: grid;
    grid-template-columns: 1.5fr 4fr 1fr 1fr 1fr 0.7fr;
}

.ruleset-ul li.ruleset-extra.ruleset-extra-exclusive {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr 0.5fr;
}

.ruleset-ul li#ruleset-addrule {
    display: block;
    text-align: center;
    background-color: #36bba7;
}

#ruleset-addrule {
    text-align: center;
}

.ruleset-checkbox {
    float: right;
}

.targets-ul {
    max-height: 50px;
    overflow: auto;
    column-width: 110px;
    column-gap: 3px;
    background-color: #affdf2ff;
    padding: 3px 3px 3px 3px;
    margin-right: 5px;
    border-radius: 8px;
}

.targets-ul li {
    break-inside: avoid;
    text-align: center;
    border-radius: 15px;
    border: 1px solid rgb(255, 255, 255);
    color: white;
    background-color: #7ccf35;
    white-space: nowrap;
}

.targets-ul li.ruleset-targets-add {
    max-width: 30px;
    background-color: #f8d969;
}

button.target-del-button {
    padding: 0 0 0 0;
    background: transparent;
    margin-left: 6px;
}

.seat {
    background-color: #ffdd99ff;
    padding-top: 4px;
    padding-bottom: 3px;
}


.file-selector::file-selector-button {
    background-color: azure;
}

#seats-preview {
    float: right;
    overflow: auto;
    /* max-width: 80%; */
    /* max-height: 50%; */
    margin: 0px 10px 50px 10px;
    /* border-radius: 15px; */
    /* border: 3px solid rgb(255, 255, 255); */
    /* margin: auto; */

}