#config-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: none;
    background: none;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
    z-index: 1000;
}

#config-btn svg {
    width: 20px;
    height: 20px;
}

#config-btn.is-active, #config-btn:hover { background-color: var(--bg-surface); }

#config-container {
    position: fixed;
    top: 56px;
    right: 14px;
    width: 235px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 1;
}

#config-menu { list-style: none; width: 100%; padding: 6px; margin: 0; line-height: normal; }

.list-item {
    text-align: left;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-radius: 8px;
    color: var(--text);
    transition: background-color .12s ease, color .12s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.list-item:hover { cursor: pointer; color: var(--accent); }

#config-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 4px; }

.config-icon { width: 18px; height: 18px; margin-right: 10px; flex-shrink: 0; align-self: center; }

.list-item-disabled {
    text-align: left;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-radius: 8px;
    color: var(--disabled);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.list-item-disabled:hover { cursor: default; }

@media (max-width: 575.98px) {
    #config-container { top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 16px 16px 0 0; z-index: 1001; padding-top: .5rem; padding-bottom: 1rem; }
    #config-btn { top: 10px; right: 10px; width: 30px; height: 30px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    #config-container { top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 16px 16px 0 0; z-index: 1001; padding-top: .5rem; padding-bottom: 1rem; }
    #config-btn { top: 10px; right: 10px; width: 30px; height: 30px; }
}